Correct way to include CSS after <head>

css html w3c
Alex picture Alex · May 19, 2012 · Viewed 18.2k times · Source

Apparently adding <link rel="stylesheet" ... in the document body is considered a bad practice by W3C standards. The same for adding <style> blocks in the body...

So are there any standard-compliant solutions to add CSS outside of the <head> tag? Like at the end of the document.

Answer

Madara&#39;s Ghost picture Madara's Ghost · May 19, 2012

If you only want to include your CSS styles on a specific events, there's nothing stopping you from doing so at the head:

var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.href = "path/to/file.css"; //Replace here

document.head.appendChild(linkElement);

This has the added benefit of adding your stylesheet in an async way, which doesn't block the browser from downloading anything else.

Related questions

There is no attribute "allowtransparency"

I am looking for some alternate way to do: <iframe transparency=true ... When I do the W3C validation, I am getting the error: Column 31: there is no attribute "allowtransparency" If use this CSS, .iframe-trans-fix{ opacity: 0; filter:alpha(opacity=0); } …

Read More
What are best practices to order elements in <head>?

can use anything in any order? does placing of <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> is important before <title> this is most used, is it best way? <!DOCTYPE HTML PUBLIC "-//W3C//…

Read More
Why do we use <script> for scripts, but not <style> for external CSS?

A relative of mine who started to learn Web Development asked me this question. Why <script src="min.js"></script> and <link rel="stylesheet" href="min.css">? Why not <style href="min.css"&…

Read More