CODEWITHSUNDEEP
htmlcss
Kiyoshi
Kiyoshi

Reputation: 203

Does CSS have to be defined within <head> tags?

I would like to define a snippet of CSS in my page like this:

<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
</style>

I keep reading that it should be defined within the <head> element, but it seems to work fine when inline. Can someone confirm if this is okay?

Upvotes: 12

Views: 9912

Answers (4)

Chris Foster
Chris Foster

Reputation: 1300

It is not strictly valid unless you are using HTML5 and the scoped attribute.

Although all browsers that I know of will accept the tag anywhere in the document.

Upvotes: 2

David Thomas
David Thomas

Reputation: 253308

For HTML 4 the spec says:

The STYLE element allows authors to put style sheet rules in the head of the document. HTML permits any number of STYLE elements in the HEAD section of a document.

Reference: http://www.w3.org/TR/html4/present/styles.html#h-14.2.3.

Their specification of "head of the document", rather than simply 'document' strongly suggests that elsewhere is inappropriate.

For HTML 5, however, this is relaxed and the style element can be placed within the document itself:

The style element allows authors to embed style information in their documents. The style element is one of several inputs to the styling processing model. The element does not represent content for the user.

Reference: http://www.w3.org/TR/html5/semantics.html#the-style-element.

Upvotes: 13

Williham Totland
Williham Totland

Reputation: 28999

It is not OK.

While some browsers might (mistakenly) care about it when not in the HEAD element, this is not behavior you should rely on, as it is counter to the HTML standard and may or may not work in the future for any given browser.

Edit: Update: In HTML 5, style elements can be scoped to only apply to a subtree, in which case they don't need to be in the head element.

They still, however, need to be in front of any other content they apply to, so the same principle applies.

Upvotes: 2

kͩeͣmͮpͥ ͩ
kͩeͣmͮpͥ ͩ

Reputation: 7846

Most browsers put it anywhere in the page, but just be aware that it only takes effect from that point onwards. Also, it's not valid HTML if you don't put it in the head element.

Also, it's considered best practise to put it in the head element as it improves page render times.

Upvotes: 2

Related Questions