HTML - <style>
The HTML <style>
element contains style information for a document, or part of a document. By default, the style instructions written inside that element are expected to be CSS.
Examples
A simple stylesheet
<style type="text/css"> body { color:red; } </style>
A scoped stylesheet
In this example, the scoped
attribute is used to create a style which applies only to a <section>
element in which it's contained.
The scoped
attribute has been removed from the specification after only limited and experimental adoption by Chrome and Firefox. You should avoid using it, as it will almost certainly be removed from these browsers soon.
<article> <div>The scoped attribute allows for you to include style elements mid-document. Inside rules only apply to the parent element.</div> <p>This text should be black. If it is red your browser does not support the scoped attribute.</p> <section> <style scoped> p { color: red; } </style> <p>This should be red.</p> </section> </article>
Live sample
Description
The HTML <style>
element contains style information for a document, or part of a document. By default, the style instructions written inside that element are expected to be CSS.
Content categories | Metadata content, and if the scoped attribute is present: flow content. |
---|---|
Permitted content | Text content matching the type attribute, that is text/css . |
Tag omission | Neither tag is omissible. |
Permitted parent elements | If the scoped attribute is not present: where metadata content is expected or in a <noscript> element itself a child of <head> element.If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace and <style> elements, and not as the child of an element whose content model is transparent. |
DOM interface | HTMLStyleElement |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
scoped |
20[1] | 21.0 (21.0)[2] | No support | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
scoped |
? | 25.0 (25.0)[2] | No support | No support | No support |
[1] Supported in Chrome 20+ to 34 by enabling the "Enable <style scoped>" or "experimental WebKit features" flag in chrome://flags
. Removed in Chrome 35+ due to code complexity.
[2] Gecko 20 and later implement :scope
pseudo-class, but the preference layout.css.scope-pseudo.enabled
must be set to true
. This is only the case by default in Nightly and Aurora test versions.
See Also
- The
<link>
element allowing to use external style sheets.
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'style' in that specification. |
Living Standard | Added the scoped attribute. |
HTML5 The definition of 'style' in that specification. |
Recommendation | No change from HTML 4.01 Specification. |
HTML 4.01 Specification The definition of 'style' in that specification. |
Recommendation |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/style