Question 209641 in Html Question posted in
Some basic documentation can be found here.

Why should I put a stylesheet link in the <head></head> area of my html code?

I have a reason to put a link to my stylesheet someplace other than the <head> section of my html. Example:

<html>
....
<head>
....
</head>
<body>
....
<link rel="stylesheet" ....>
</body>
</html>

Now, I realize that this is considered "wrong", based on my reading of Where should I put the stylesheet link in the html code? . However, that same page refers to this: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works . After reading how CSS works it appears to me that the <link> to the stylesheet can appear ANYWHERE in the html file since the full html is read, parsed, and then CSS is applied.

So, are the answers in the above stackoverflow page just quoting "best practices" or "the way it was 6 years ago" (that stackoverflow question is 6 years old at the time of this writing) or the way it is documented to work and nothing else is guaranteed? If the latter can you please send me a link to the document that states this?

I’m just trying to separate fact from superstition. Thank you!

Note: I’ve tried the above on a few different browsers and they all work the same regardless of where I put the <link> (within reason!)

Tags:

2

Answers


  1. 0

    The biggest reason is that you can load the style sheets early, you avoid flash and un-styled content from a later load making such occur.

    The browser can start rendering the page with the applied styles while parsing the rest of the content.

    Beyond that no rule, you can do what you want but is it best practice; probably not.

    Login or Signup to reply.
  2. 0

    The question is seeking an answer that separates fact from fiction.

    The fact is that the HTML standards group (now WHATWG) have stated that a link which has rel stylesheet is ‘body-ok’.

    From WHATWG

    Keywords that are body-ok affect whether link elements are allowed in the body. The body-ok keywords are dns-prefetch, modulepreload, pingback, preconnect, prefetch, preload, and stylesheet.

    Whether you want to put such links in the body depends on the context in which you are working. Some argue that you should not do this e.g. because it makes it more muddly to separate styling and content.

    However, the question here clearly states that there is a need to do this in their context.

    So, go ahead.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search