The Document - HTML5 with CSS3 - page 54

head , anywhere in the document's body element, and the enclosed CSS rules will apply only to the style
element's immediate parent element and its contents.
Limiting the scope of a style element allows you to embed a set of style rules for just one section of a
page. Or that's how it may work soon, at least—no browsers have yet implemented support for the scoped
attribute at the time we write this.
There are some major problems with the scoped attribute even beyond the current lack of browser
support. For one thing, it mixes presentation with structure, injecting CSS rules into the markup of a page
where they arguably don't belong. But moreover, most browsers currently tolerate style elements in the
body (invalid though it is) and will try to apply those style rules to the entire document, just as if it were in
the header. Browsers that don't understand the scoped attribute (which is to say every web browser ever
made to date) won't narrow the scope of the embedded rules and will still apply those styles to every
matching element on the page, defeating the purpose of using a scoped style element in the first place. If
or when the next generation of web browsers support scoped style elements, the scoped attribute still
breaks backward compatibility with current and older browsers.
The HTML5 specification is a work in progress, and there's a chance the scoped attribute will be removed
by the time you read this. Even if it survives in the spec, and even if browsers begin to support it, you're
probably better off finding another way to style your elements. Simply adding a class attribute to some
container element and using that class as a “hook” for more specific style rules in your external or
embedded style sheet is a tried and true, completely failsafe approach. Don't use scoped unless you know
very well what you're in for.
Required Attributes
The style element doesn't require any attributes. The type attribute was required in some previous strict
versions of HTML and XHTML, but that requirement is lifted in HTML5 (browsers assume the content type
is text/css unless told otherwise).
Optional Attributes
 media : the media for which the embedded style information is intended. This attribute's value
must be a valid media type or media query.
 scoped : a Boolean attribute that, when present, applies the embedded style rules only to the
parent element and its other descendants, not to the rest of the document. This attribute is new in
HTML5 and isn't currently implemented in any browsers as of this writing. Even if it's
implemented in the future, older browsers won't support it and may still apply the embedded
styles to the entire document. This lack of current support and lack of backwards compatibility
makes the scoped attribute impractical for the moment, and probably for the foreseeable future.
 title : this attribute, when present, indicates that the embedded style information is an
alternative style sheet, and may not apply to the document unless selected by the user. This
differs slightly from the global title attribute, as title has special semantics when it appears
with a style element.