Menu
style is supposed to be included only on the head of the document.
Besides the validation point, one caveat that might interest you when using style on the body is the flash of unstyled content. The browser would get elements that would be styled after they are displayed, making them shift on size/shape/font and/or flicker. It is generally a sign of bad craftsmanship. Generally you can get away with putting style anywhere you want, but try to avoid it whenever it is possible.
HTML 5 introduced a scoped attribute that allowed style tags to be included everywhere in the body, but then they removed it again.
According to the current spec, yes, style elements must always be in the head. There are no exceptions (except a style element inside a template element, if you want to count that).
This has not always been the case historically. If you care about the details of the spec and its history, keep reading.
No matter what the spec says, using style elements in the body does more-or-less work in all major browsers. However, it is considered a bad practice both because it violates spec and because it can cause undesirable consequences like worse rendering performance or a "flash of unstyled content".
style elements didn't exist in HTML 2. They were introduced in HTML 3.0, where they were included in the list of elements that could be included in The Head Element, but not included in the list of elements that could be present in The Body Element. Thus, at the moment the element was first specced, it could only be included in the head.
This remained the case (albeit expressed using different wording) until HTML 5, which introduced the (since removed) scoped attribute for style elements. This attribute, when present, was meant to allow a style element to be placed within an element in the body to style only that element's descendants. However, that feature never made it to any real browser (at least not without needing to be enabled via a developer flag) and was removed from both the W3C and WhatWG specs "due to lack of implementer interest". Thereafter, style elements were only permitted in contexts that allow metadata content, which is only the head. Thus we were back to the same rules as before HTML 5.
However, due to an error made by both spec organisations, a non-normative index of elements included as an appendix in both specs was not properly updated to reflect the removal of scoped, rendering it inconsistent with the normative spec. I pointed this out both to the WhatWG and to the W3C, and in doing so unwittingly set in motion events that caused the two specs to diverge.
WhatWG's solution to the inconsistency between the normative spec and non-normative index was to accept my patch correcting the non-normative index.
The W3C, on the other hand, rejected my equivalent patch in favour of instead updating the normative spec to allow the use of style elements in the body, while caveating this with a note that it can cause problems and should be done "with care". The reasoning behind this change was to make the spec align with real-life browser behaviour.
Thus, from March 2017, it was the case that the official answer to this question depended upon which standards organisation you chose to listen to. If you listed to the (generally more respected) WhatWG spec, then a style element was not allowed in the body. If you listed to the W3C spec, then it was allowed, but not recommended.
This silly state of affairs was ended (perhaps like many other such inconsistencies) with the April 2019 peace treaty between W3C and WhatWG, which agreed that the WhatWG spec would become the one true living HTML standard, with W3C merely releasing snapshots from it as numbered HTML specifications instead of developing a competing spec in parallel. Thus, the change from 2017 to the W3C fork that allowed style elements in the body is no longer part of any current spec; it is merely a curiosity of history.
So, today, we need only look to the WhatWG spec to determine what is officially allowed. It has this to say:
4.2.6. The
styleelementCategories:
Metadata content.
Contexts in which this element can be used:
Where metadata content is expected.
In a<noscript>element that is a child of a<head>element.
CTRL-Fing through the single-page spec reveals that the only element whose content model includes metadata content is the head element.
The non-normative index of elements I mentioned fixing earlier also confirms that the only permissible parents for a style element are a head or noscript element.
While the other answers are correct, I'm surprised nobody has explained where the standards disallow styles outside of head.
It's actually in the section on The head Element (and in the DTD):
<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">
<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->
Yes, I know. DTDs are hard to read.
This is the only place where the STYLE element occurs, so implicitly it's invalid elsewhere.
They aren't supposed to go outside the head, but they work anyway; though you might notice a quick flicker. The site shouldn't validate with the style tag outside of the head, but does that really matter? Also, link tags work outside the head as well, even though they aren't supposed to.
Like the other replies have stated it doesn't actually need to be there. However, it will not validate. This may or may not matter in this instance, but please keep in mind that rendering of html is entirely up to the browsers. From what I know all used browsers of today will support putting it outside the head, but you cannot guarantee that for the future browsers and future browser releases.
Stick with the standard and you are safer. How much safer is up for very much debate.
According to this site, HTML5.1 (in draft) and WHATWG allow the <style> tag to be put in the body:
http://www.html.am/tags/html-style-tag.cfm
It also seems to have been supported by browsers for quite a while. According to this StackOverflow answer, Firefox 3+, IE6+, Safari 2+ and Chrome 12+ support it:
https://stackoverflow.com/a/10989663/297793
The HTML5.2 W3C Recommendation, 14 December 2017 (not the earlier draft referred to above) now says you can include <style>.
"In the body, where flow content is expected." (section 4.2.6)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With