How to correctly load a stylesheet within the body?

Question

I know I can just put the <link> tag in the body and apparently it works, but I know it's not "valid" html and I want to avoid issues with strict browsers like firefox, which ignore every behavior a web designer expects if it's not defined in the official specification.

So is there some official way to load a stylesheet in the body area of the html?

One problem I have is loading necessary stylesheets when I update the page through ajax request. I don't like searching for stylesheets in the html code. They should work automatically after I append the html :/ — thelolcat, Nov 23 '14 at 16:12
Why don't you use one stylesheet for everything and load the entire stylesheet from the beginning? — Thomas Bormans, Nov 23 '14 at 16:15
Check this answer: http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript — Thomas Bormans, Nov 23 '14 at 16:23
You could include your styles in the response html code. Read this post for further information: http://stackoverflow.com/a/16844668/2328888 — TheFrozenOne, Nov 30 '14 at 14:11
The specs are there for a reason.... in the dim dark early days of the web when the specs were readily ignored it was anarchy and you had to deal with a whole heap of messing around to deal with browser inconsistencies. Work with the spec not agains it. — Jon P, Nov 30 '14 at 14:15

score 13 · Accepted Answer · answered Dec 01 '14 at 08:13

13

You can add your css in the head dynamically as well like below:

jsCode:

var head = document.getElementsByTagName("head")[0],
    cssLink = document.createElement("link");

cssLink.href = "path/to/filenam.css";
cssLink.id="dynamic-css";
cssLink.media="screen";
cssLink.type="text/css";

head.appendChild(cssLink);

answered Dec 01 '14 at 08:13

Ashish Panchal

486
2
8

5

For me in Chrome 64 this did not work until I added `cssLink.rel = "stylesheet";` – Michael Bromley Feb 13 '18 at 10:52

score 8 · Answer 2 · answered Nov 30 '14 at 14:15

8

document.head.appendChild( linkElement );

…where linkElement is your style link. Nobody's forcing you to add stuff to the body, just add it to the head.

answered Nov 30 '14 at 14:15

Barney

16,181
5
62
76

1

ProBoards is forcing me to add stuff to the body, but at least scripting helps me work around that. – Tcll Jan 01 '17 at 02:34
1

@Tcll in practice, using scripting to *move* the style links from the body to the head using the DOM can only be a liability. A link in the body will work fine, and reintroducing them in the head will at best produce exactly the same outcome - but there is potential for things to go wrong: if there's a delay between removing and reintroducing, there will be a flash of unstyled content; if they are introduced in a different order, styles may break. – Barney Apr 17 '18 at 12:14
in my recent case, moving stuff to the head actually fixed my issues, but even still, my code **creates** the link in the head, it doesn't move it from the body as far as I'm aware, unless JQuery does some unseen stuff. >_> – Tcll Apr 17 '18 at 12:40

score 6 · Answer 3 · 2022-09-17T12:41:47.503

6

It is valid to link to a stylesheet in the body

The stylesheet keyword may be used with link elements. This keyword creates an external resource link that contributes to the styling processing model. This keyword is body-ok.

https://html.spec.whatwg.org/multipage/semantics.html#body-ok https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet

edited Sep 17 '22 at 12:41

answered Mar 08 '17 at 20:27

score 1 · Answer 4 · edited Apr 13 '17 at 12:33

Actually in older versions of HTML it was illegal to put a link element in the body element and must be only in the head section of the HTML document. From this link, there is a section that states this

it may only appear in the HEAD section of a document

So, just simply load the stylesheet into the head element, there is no possible reason for you, or for anyone to write illegal documents that do not satisfy the rules of W3.org.

<head>
   <link rel="stylesheet" href="~/css/file.css" />
</head>

However, there is another question that you might be interested in reading, and in which condition you can add link element to the body section. Read the answer here.

How to correctly load a stylesheet within the body?

4 Answers4