158

Normally css files are put inside <head></head>, what if I put it inside <body></body>, what difference will it make?

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
Shawn
  • 28,051
  • 17
  • 43
  • 68

12 Answers12

118

Just to add on to what jdelStrother has mentioned about w3 specs and ARTstudio about browser rendering.

It is recommended because when you have the CSS declared before <body> starts, your styles has actually loaded already. So very quickly users see something appear on their screen (e.g. background colors). If not, users see blank screen for some time before the CSS reaches the user.

Also, if you leave the styles somewhere in the <body>, the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.

HoldOffHunger
  • 10,963
  • 6
  • 53
  • 100
mauris
  • 39,624
  • 14
  • 92
  • 128
  • 10
    Yes of course in HTML5 it's okay. But in terms of rendering, it may be slower because the browser re-renders the page like I mentioned. – mauris Dec 17 '12 at 13:30
  • 4
    Yes, no doubt. I just added it here so that people who just read the accepted answer would not miss it. :) – Vilx- Dec 17 '12 at 19:22
  • 3
    @Vilx that is wrong information! `link` and `style` must not appear in the body unless they are either scoped (style) or have the attribute `itemprop` (link) declared. – Christoph Apr 15 '14 at 13:47
  • 2
    @Christoph this is not true, `style` is a [flow element](https://www.w3.org/TR/html5/dom.html#flow-content) in html5 and html4.1 (even if it is not scoped) and can be put in the body. – Kpym Jan 09 '18 at 08:25
  • 1
    @Kpym You're 3 years late to the party;-) But you are correct, style is now a flow element and the `scoped` attribute has been obsoleted. – Christoph Jan 10 '18 at 18:54
  • I know this is old but as far as load times it doesnt make much of a difference, but I think it's much cleaner to put in the head. When I work on old web sites I want my refs to be located in the standard location. I HATE UGLY code! – yardpenalty.com Jun 11 '19 at 14:11
44

The most recent versions of the HTML spec now permits the <style> tag within body elements. https://www.w3.org/TR/html5/dom.html#flow-content Also the scoped attribute which used to be prerequisite to have a style tag in the body is now obsolete.

This means, that you can use the style tag everywhere you want, the only implications are decreased page performance due to possible reflows/repaints once the browser hits styles further down in the page tree.

Obsolete answer:

The <style> tag isn't allowed within <body> according to the w3 specs. (You can, of course, apply inline styles via <div style="color:red"> if necessary, but it's generally considered poor separation of style & content)

Christoph
  • 46,101
  • 18
  • 92
  • 121
Jonathan del Strother
  • 2,452
  • 18
  • 32
  • 3
    This is not true, ` – Kpym Jan 09 '18 at 08:28
  • 1
    My +1 for keeping your answer up to date! – BenMorel Jul 09 '18 at 12:08
14

Putting CSS in body means it is loaded later. It is a technique some use to let the browser start drawing the interface faster (i.e., it removes a blocking step). This is important for user experience on SmartPhones.

I do my best to keep one small css on the <head> and I move the rest at the bottom. For example, if a page uses JQuery UI CSS, I always move it at the bottom of the <body>, just before the links to JQuery javascript. At least, all the non Jquery item can already be drawn.

Jérôme Verstrynge
  • 51,859
  • 84
  • 263
  • 429
7

Head is designed for (Quoting the W3C):

"information about the current document, such as its title, keywords that may be useful to search engines, and other data that is not considered document content"

See the Global structure of an HTML document. As CSS is not document content, it should be in the head.

Also every other Web developer will expect to see it there, so don't confuse things by putting it in the body, even if it works!

The only CSS you should put in the body is inline CSS, though I usually avoid inline styles.

RichardOD
  • 27,854
  • 8
  • 55
  • 77
  • 3
    I completely follow what you're saying. But how would you handle the situation where you have many pages, some of which include content from a separate file (in my case, a .NET Razor partial page) and whenever that file is included, a specific stylesheet should also be linked? Either link in the header of each includ_ing_ page, or link in the body of the includ_ed_ page. The former conforms to "css in header", while the latter conforms to "write it once". – OutstandingBill Oct 29 '15 at 22:56
4

The standards (HTML 4.01: the style element) clearly specifies that the style tag is only allowed inside the head tag. If you put style tags in the body tag the browsers will try to make the best of it anyway, if possible.

It's possible that a browser would ignore a style tag in the body if you specify a strict document type. I don't know if any current browser does this, but I wouldn't count on all future versions to be so relaxed about where you place the style element.

Guffa
  • 640,220
  • 96
  • 678
  • 956
  • 1
    @Pacerier: In HTML5 `style` tags are allowed in the body if they have a `scoped` attribute. – Guffa Apr 30 '14 at 23:47
  • Gosh, everyone is giving contradicting answers: http://stackoverflow.com/questions/4957446/load-external-css-file-in-body-tag/4957526#comment-26845703 – Pacerier May 01 '14 at 04:15
  • 2
    @Pacerier: That's because the information in that comment is incomplete. You can have style tags in the body tag, but *only* if they have a scoped attribute. Here is the standard document specifying the style tag: http://dev.w3.org/html5/spec-preview/the-style-element.html – Guffa May 01 '14 at 07:14
  • according to W3 scope attributes are only supported by firefox so what is the point? – JSON Jan 09 '18 at 15:20
4

Although the style tag is not allowed in the body, the link tag is, so as long as you are referencing an external stylesheet, all browsers should render and use the CSS correctly when used in the body.

Source: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element

MacroMan
  • 1,821
  • 21
  • 30
1

In addition to earlier answers, though putting a style code block inside the element may work in modern browsers (though that still doesn't make it right), there's always a danger, particularly with older browsers that the browser will render the code as text unless the style section's included within a CDATA section.

Of course the other thing with putting it inside the element, other than inline styles, is that as it doesn't meet with the W3C HTML/XHTML specs is that any page with it within the body will fail on the W3C validator. It's always easier to bug-hunt unexpected display problems if all your code is valid, making it easier to spot mistakes. An invalid HTML element can adversely effect the rending of any and all element beyond where it occurs in the code, so you can get unexpected effects having elements in places where they shouldn't be, because when a browser finds an invalid element, it just makes it's best guess as to how it should display it, and different browsers may make different decisions in how they render it.

Whether you use a transitional or a strict doctype, it would still be invalid according to the (X)HTML specs.

BlissC
  • 741
  • 2
  • 13
  • 18
1

Two conflicting answers:

From MDN page on link tag:

A <link> element can occur either in the <head> or <body> element, depending on whether it has a link type that is body-ok. For example, the stylesheet link type is body-ok, and therefore a <link rel="stylesheet"> is permitted in the body. This isn't however best practice; it makes more sense to separate your <link> elements from your body content, putting them in your head.

From CSS The Definitive Guide (4th Edition/2017) page 10

To successfully load an external stylesheet, link must be placed inside the head element but may not be placed in any other element.

Undistraction
  • 38,727
  • 46
  • 165
  • 296
-1

You would actually defeat the purpose of using CSS by putting the styles in the body. The point would be to separate content from presentation (and function). This way, any changes to style can be done in the stylesheet, not in the content. Once you use the inline style method, every page that has inline styling needs to changed one by one. Tedious, and risky since you could miss a page or three, or ten.

Using a stylesheet, you only need to change the stylesheet; the changes propagate automagically to every HTML page that links to the stylesheet.

neonble's point is also another great reason; if you mess up the HTML by adding CSS inline, rendering becomes a problem. HTML doesn't throw exceptions to your code. Instead it goes out and renders it the best way it can, and moves on.

Adhering to web standards by using a stylesheet makes for a better website. And when you need help because things on your page aren't exactly that way you want them, placing your CSS in the head as opposed to the body makes for much better troubleshooting by yourself and for anyone you ask for help from.

tahdhaze09
  • 2,098
  • 1
  • 19
  • 35
  • 2
    I don't understand what you are talking about. "*Once you use the inline style method"* - who is talking about using inline styles here? The question says **css file**. – T J Sep 18 '14 at 11:19
-1

The difference is. The loading of the page is asynchronous, so if you have external stylesheet it will load the css file immediately when it reach the link tag, that is why it is good to have at the top in head.

Tameshwar
  • 761
  • 10
  • 16
-1

What difference will it make?

Pros: Sometimes easier to apply certain attributes in certain places, especially if code is being generated on the fly (such as building via php and each of a dynamically sized list needs its own class... such as for item timings for transforms).

Cons: Slightly slower, may not work someday in the distant future.

My General opinion on it: Don't do it it you don't have to, but if you do have to, don't lose any sleep over it.

lilHar
  • 1,367
  • 2
  • 15
  • 28
-2

Putting the <style> in the body works well with all modern browsers.

I had been using this in eBay.

If it works, don't kick it.

TylerH
  • 19,065
  • 49
  • 65
  • 86
Randall Glass
  • 21
  • 1