ESP8266 Community Forum

Posted: **Sat Sep 26, 2015 6:31 pm**

Hello,

I am trying to use a simple css style sheet, and found that the styles are not applied if my page starts with <!DOCTYPE html>.

Code: Select all

const char PAGE_Root[] = R"=====(
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
Button S1: %s</br>
Button S2: %s
</p>   
<p>Server Up Time: %02d:%02d:%02d</p>
</body> 
</html>
)=====";

Code: Select all

const char PAGE_Style_css[] PROGMEM = R"=====(
body { background-color: #D2B48C; }
p  {font-family: Arial; font-size: 40px; }
h1 {   color: black;    text-align: center;    font: 120px arial; }
p.Time {    color: black;    text-align: center;    font: 40px arial; }
p.Empty {    color: red;    text-align: center;    font: 40px arial; }
)=====";

I can leave the <!DOCTYPE html> if the style are inline.

I appreciate any help,
Greg

Posted: **Sun Sep 27, 2015 12:43 pm**

Greg,

In Firefox, toggle tools ON from the Tools|Web Developer menu.
Refresh the Page, and look at the Console tab.
Note the error code:
The stylesheet http://192.168.1.123/style.css was not loaded because its MIME type, "text/plain", is not "text/css".

Changing the server.on from

Code: Select all

server.on ( "/style.css", []() { Serial.println("Page: Style.css"); server.send ( 200, "text/plain", PAGE_Style_css );  } );

to

Code: Select all

server.on ( "/style.css", []() { Serial.println("Page: Style.css"); server.send ( 200, "text/css", PAGE_Style_css );  } );

fixed the issue, allowing the page to load with the style sheet.

Greg

ESP8266 Community Forum

css style sheet will not load with <!DOCTYPE html> SOLVED

css style sheet will not load with <!DOCTYPE html> SOLVED

Re: css style sheet will not load with <!DOCTYPE html> SOLVE