Normally css files are put inside <head></head>, what if I put it inside <body></body>, what difference will it make?
views:
365answers:
8
+1
A:
Recomended to put it inside of head, becouse it optimize browser rendering.
ARTstudio
2009-10-29 08:12:02
+8
A:
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)
jdelStrother
2009-10-29 08:14:52
+1
A:
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
2009-10-29 08:17:06
+5
A:
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 the styles somewhere the <body>, the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.
thephpdeveloper
2009-10-29 08:19:04
+1
A:
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
2009-10-29 08:19:09
+1
A:
If you do place it in the middle I can see the browser starting to load your page then once it gets up to the CSS, and effects to content which is already displayed will move around, and the page might take a bit longer to display your content, due to the CSS in the middle of it.
In most cases i would expect any CSS you put in the middle, would only effect what comes after it so the biggest problem you should find is that your page will display in parts.
Be wary of putting CSS which will end up effecting anything you have above it! ;)
kevchadders
2009-10-29 08:48:42
+1
A:
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.
NeonBlue Bliss
2009-10-29 12:11:43
+1
A:
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
2009-10-29 15:34:19