This question already has answers here:
Does <STYLE> have to be in the <HEAD> of an HTML document?
(10 answers)
Closed 9 years ago.
So first off, I know that the <link> tag to link a CSS external style sheet should be in the <head> section, and that it is very unorthodox to place it outside the head.
However, I am using head and footer includes for modular web design, and there are some CSS stylesheets which apply to certain pages and not others.
Having placed some <link> tags within the <body> section of a certain page, thanks to the sweet accommodation of modern browsers I have so far experienced nothing wrong except in IE.... but, personally I don't care too much about IE at the moment.
So, apologies to the HTML purists, but I must ask: what negative consequences are there for linking CSS external stylesheets outside of <head>?
In my research, people have usually just stuck to referencing w3schools as stating "link your CSS stylesheet in the head", but not elaborating too much on why: Do <link href=""> tags only go in the <head> tag?
"Validity" is given as one answer, but what does that entail? Search engine friendliness? I don't see any benefit to me if search engines read my stylesheets or not...
Quoted from the HTML 4.01 Specification
This element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times.
The HTML5 specification however does not mention the tag must appear in the HEAD section. So if you use them inside the body make sure you use the HTML5 DOCTYPE e.g.
<!DOCTYPE html>
The HTML5 specification states the following.
A link element must have a rel attribute.
And also
Note
If the rel attribute is used, the element is restricted to the head
element.
<Link> element defines the relationship between the current document and another resource i.e. style sheet.
<head> tag is the container for all head elements like script,link, title and meta tags. These head elements are not being displayed in the document when viewed in browser.
We can place the <link> elements in the body section also but we can't place the other html elements in the <head> section. For example if include <a> element in the <head> section then we can't view i in browser as it's not part of the document <body> section.
Best practice is to keep the <link> elements at the top of the document i.e in <head> section so that all elements which has styles in style sheet will get applied before loading the page itself. If we keep <link> at the bottom or middle of the <body> section then document will display all the content first and styles will get applied later.
Related
I have a CSS stylesheet that contains a lot of declarations starting with html.some-class. Now I'm wondering if there would be any difference if I wrote :root.some-class.
I suppose that the browser may scan the whole DOM to try to apply the html.some-class rule, because there might be an invalid document with more than one <html> tag. On the other hand, in a valid HTML document (and I can be sure that the styled document is standard-compliant) there is only one root element, so that the :root search doesn't have to traverse the whole tree.
Taking the above into consideration, would my stylesheet be more efficiently applied if I used :root instead of html?
Footnote: I'm not able to get rid of the selector targeting the <html> tag.
I noticed that if I place <style> inside <body> the css would be applied to all elements after and before <style> tag.
So it looks to me that the css is processed when the page is loaded, similar behavior to javascript document ready event. Am I right? And if that is the case in which order would multiple <style> tags be processed?
TL;DR:
In short, the answer to your question is: once a <style> tag is met inside <body> everything stops and the CSSOM is being rebuilt and re-applied to all existing rendered (painted) content.
Placing <style> tags inside <body> is considered bad practice because it can create FOUC. But if your <style> tag only contains rules for elements placed after it in DOM, placing it in body is perfectly fine, as no FOUC can happen.
The render process of a page is quite complex. But, overly-simplified, here's what happens
<head> is read and CSSOM is built. All CSS is render blocking, unless explicitly specified otherwise by use of #media queries. The non-blocking CSS is still loaded, it's not entirely skipped.
DOM building and CSSOM building are ran in paralel, but all <script> execution is deferred until CSSOM has been built (on </head> tag met), at which point all loaded <script>s are ran, blocking DOM building. JS can make changes to CSSOM at this point. *
Placing <style> tags inside <body> interrupts everything (JS execution and DOM building), CSSOM is being updated and applied to the already rendered content, if any. Everything is resumed after.
* On further testing it appears <head> parsing is single threaded. CSSOM building does block javascript execution but it's done is stages, as each <link /> and <style> tags are met (a <script> placed after a <link> will only execute after the <link /> was resolved and applied to CSSOM). <script> tags placed in between CSS resources are not deferred until all CSS resources in <head> are parsed, as I initially thought.
And, of course js can make changes to CSSOM at run time. See this question I asked for more on how js execution is blocked by CSSOM building.
All the above apply to the normal loading, without considering async, which adds a whole new layer of complexity to it.
If you're interested in more details, I recommend going through the Performance chapter of Web Fundamentals, provided by Google.
Scope of CSS
A style element applies to the whole document, regardless of its position. It is applied as soon as it's loaded.
Reason for putting style tags in <body>
Since every browser has a limited number of threads for downloading a page's files (like JS, CSS, images and asynchronously loaded HTML, JSON or XML), people tend to include CSS files at the end of the body element instead of the classic approach of including them in the head element. This way the rest of the page can be loaded and rendered, and the styling is applied last. You would go this way if your CSS is purely for the looks (i.e. no required element hiding) in order to improve the user experience.
CSS files vs style rules in HTML
Including an external CSS file or putting the same rules in a style element have equivalent results regarding layout and styling. The external file has the downside of a little HTTP overhead, but the benefit of being cached for any further request. If your site consists of more than one page, you usually want to have one or more CSS files that are downloaded only once and re-used for most pages. In addition you can have page-specific rules in another file or within the HTML page.
So it looks to me that the css is processed when the page is loaded, similar behavior to javascript document ready event. Am I right?
No. The stylesheet is modified with the new CSS code when that code is added to the DOM. There's no delay until the rest of the DOM has finished loading. If there was you'd see a FOUC.
which order would multiple <style> tags be processed?
The order they appear in. Then the normal rules of the cascade apply.
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?
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);
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.
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
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.
I know that internal CSS should be in the <head></head> section of a (X)HTML document, but does it need to be before/after certain <meta> or <title> elements or can it be any order?
According to the HTML5 spec, non-scoped <style> elements can go basically anywhere in the <head>.
It doesn't matter. As long as it's in the head, it can be before all the <meta> tags, or after the <title> and <script>s.
In short: <style> elements can be anywhere in the <head> element.
The elements in the head tag can be placed in any order.
Any order, if memory serves. However, I've generally experienced the common practice to be after the meta data and title
I assume that it is valid in any order, but you can confirm using: W3C's validator: http://validator.w3.org/
As long as elements in the head tag doesn't rely on each other (for example when a script relies on another script being loaded first), the order doesn't matter.
The browser will be looking for the meta tag that contains the content type and encoding, before decoding the file, so it's good to have that early in the file.
I am working on a site (www.eticket24.at) and have to create an external CSS for both the header and footer.
If I view the header, for example, seperately in FireFox by going to www.eticket24.at/header.php, it looks fine — the CSS is all there, and it's styled the way it should be. However, in IE8, if I do the same, the style is gone compeletely. It works on the index page, but not when I view it alone.
I am using link rel="stylesheet" href="http://www.eticket24.at/et24_header.css to include the CSS at the top of my header.php page. Same goes for my footer.php page.
So, what's the problem with Internet Explorer this time? Why won't it behave?
Thanks.
header.php doesn’t return a full HTML page, so maybe Internet Explorer is borking on that. Even though Firefox renders it, I don’t think you can necessarily expect all browsers to do so.
As ifaour mentioned, you might want to move your <link> tags into the <head> tag, as they’re not meant to go in <body>.
Your link is inside the body of the page... try putting it inside the <head /> section. Also add type="text/css" to the <rel /> tag.
It's because when you're vewing the header on its own, Firefox will correct the incomplete markup and make the page a valid html document with the <html><body>...</body></html> tags.
IE will not do this, so the styles will not be applied as it doesn't know to do this on an invalid page.
This is also why the page looks correct on the live site.
I included all the css inside the .php files themselves instead of linking them and changed some div names (from to , and to . This helped because css styling of the divs before were being overridden by the other companys css styling, so I had to create my own unique div names, instead of the standard HTML5 ones