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

Example sketches for the new Arduino IDE for ESP8266

Moderator: igrr

 Reply

User avatar

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

By GregryCM
- Sat Sep 26, 2015 6:31 pm #29950 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 allconst 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 allconst 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
Last edited by GregryCM on Sun Sep 27, 2015 1:03 pm, edited 1 time in total.
User avatar

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

By GregryCM
- Sun Sep 27, 2015 12:43 pm #29986 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 allserver.on ( "/style.css", []() { Serial.println("Page: Style.css"); server.send ( 200, "text/plain", PAGE_Style_css );  } );
to
Code: Select allserver.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 ;)
 Reply
Return to Example Sketches