tag. – Billu Jul 28 '17 at 12:29

Question

The error is coming because you are putting the <style> inside <div>. Do not do that. It is better to move that code to internal or separate external CSS.
External CSS is preferred because it increases the reusability.

score 3 · Accepted Answer · answered Jul 28 '17 at 12:28

3

The error is coming because you are putting the <style> inside <div>. Do not do that. It is better to move that code to internal or separate external CSS.
External CSS is preferred because it increases the reusability.

answered Jul 28 '17 at 12:28

Priyanjit

305
3
9

I would prefer not make it external for reasons explained in the third comment of the question. How can you make it internal ? If I delete the
the error stays the same. Everywhere on the internet it is said to create a "style scoped" element but it still shows as an error.
– Rackover Jul 28 '17 at 12:30
Unfortunately, the scoped style concept [has been dropped](https://github.com/w3c/html/issues/231) from the HTML spec. Browsers didn't want to implement it. It it supposed to be replaced by Shadow DOM. – Ilya Streltsyn Jul 28 '17 at 14:05

score 1 · Answer 2 · answered Jul 28 '17 at 13:52

script in body will (likely) be allowed in HTML 5.2 (W3C’s next HTML Recommendation).

The current HTML 5.2 Working Draft for the style element specifies:

Contexts in which this element can be used:

Where metadata content is expected.

In a noscript element that is a child of a head element.

In the body, where flow content is expected.

(This last line is not included in HTML 5.1, which is the current HTML Recommendation.)

Here’s the issue asking to update the validator used by the W3C:
style element conforming in body in w3c HTML

sTx · Answer 3 · 2017-07-28T13:10:35.793

Check in inspect element for styles in head

var styles = "<style>"+
    "@font-face { "+
      "font-family: 'LilyUPC'; "+
      "src: url('/common/upcll.ttf');}"+

   "div.footer {"+
        "position: fixed;" +
        "bottom: 0;" +
       "left:0;" +
        "right:0;" +
       "background-color: black;" +
        "float:down;" +
        "text-align:center;" +
        "z-index: 20;"+
        "font-family: 'LilyUPC';" +
        "color:red;" +
        "font-size:12pt;" +
        "text-decoration:underline;}" +
"</style>";

$("head").append(styles);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="other">Unstyled content here</div>
<div class="footer">Styled content here</div>

then in php you put this js inside <script </script> and echo the whole script

Like this:

echo("
     <script>
        var styles = \"<style>\"+
        \"@font-face { \"+
              \"font-family: 'LilyUPC'; \"+
              \"src: url('/common/upcll.ttf');}\"+

         \"div.footer {\"+
               \"position: fixed;\" +
               \"bottom: 0;\" +
               \"left:0;\" +
                \"right:0;\" +
               \"background-color: black;\" +
               \"float:down;\" +
               \"text-align:center;\" +
                \"z-index: 20;\"+
                \"font-family: 'LilyUPC';\" +
                \"color:red;\" +
                \"font-size:12pt;\" +
                \"text-decoration:underline;}\" +
        \"</style>\";

        $(\"head\").append(styles);

     </script>
   ");

I've use jQuery here, to do it with only javascript check [this](https://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript) — sTx, Jul 28 '17 at 13:06
Thanks ! Did it using only javascript. This works ! Just one more question : when I load the page, I've got a slight delay before any JS code executes. Do you know why? (the page is only 14kb) — Rackover, Jul 28 '17 at 14:31
because code executes after all html to `footer` has rendered, then after `php require`(or what you do to load footer) has loaded — sTx, Jul 28 '17 at 14:40
you can always make a loading screen on top of all html from body and hide it after code from footer executes, or on `window.onload`(javascript) or `$(document).ready`(jQuery) — sTx, Jul 28 '17 at 14:43

3 Answers3