Problem
What if I place the css file inside the body>/body> tag instead of the head>/head> tag? Will it make a difference?
Asked by Shawn
Solution #1
Just to add to what jdelStrother said concerning the w3 specifications and ARTstudio’s browser rendering.
It is advised because your styles are already loaded when the CSS is defined before the body> tag. As a result, users see something appear on their screen really quickly (e.g. background colors). If this is not done, users will see a blank screen for a period of time until the CSS is applied.
Also, if you leave the styles in the body>, the browser will have to re-render the page (both new and old upon loading) after the stated styles have been parsed.
Answered by mauris
Solution #2
The style> tag is now allowed within body elements in the most recent versions of the HTML specification. https://www.w3.org/TR/html5/dom.html#flow-content In addition, the scoped attribute, which was once required to have a style tag in the body, has been deprecated.
This means you can use the style tag wherever you want; the only drawback is that page speed may suffer as a result of possible reflows/repaints once the browser reaches styles deeper down the page tree.
Obsolete answer:
According to the w3 specifications, the style> tag isn’t allowed within the body> tag. (You can use div style=”color:red”> to apply inline styles if necessary, although this is typically regarded poor style-content separation.)
Answered by Jonathan del Strother
Solution #3
When CSS is placed in the body, it gets loaded afterwards. It’s a method that some people use to get the browser to draw the interface faster (i.e., it removes a blocking step). This is critical for the user experience on mobile devices.
I try to retain only one little css on the head and shift the rest to the bottom. If a page uses JQuery UI CSS, for example, I always relocate it to the bottom of the body>, just before the JQuery javascript links. At least, all the non Jquery item can already be drawn.
Answered by Jérôme Verstrynge
Solution #4
The head is made for (to quote the W3C):
View an HTML document’s global structure. CSS should be at the head because it is not document content.
Also, even if it works, every other Web developer will expect to see it there, so don’t make things complicated by placing it in the body!
Inline CSS is the only CSS you should use in the body, however I normally avoid it.
Answered by RichardOD
Solution #5
The style tag is only allowed inside the head tag, according to the standards (HTML 4.01: the style element). If you use style tags in the body tag, browsers will do their best to make the best of it.
If you specify a strict document type, it’s possible that a browser will ignore a style tag in the body. I’m not sure if any current browsers do this, but I wouldn’t expect all future versions to be as lenient about where the style element is placed.
Answered by Guffa
Post is based on https://stackoverflow.com/questions/1642212/whats-the-difference-if-i-put-css-file-inside-head-or-body