Summary
The HTML Style Element (<style>) 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 categoriesMetadata content, and if the
scoped
attribute is present: flow content . - Permitted content Style information matching the language of the
type
attribute. - Tag omission {{no_tag_omission}}
- Permitted parent elements ...
- DOM interface {{domxref("HTMLStyleElement")}}
Attributes
This element includes the global attributes.
- {{htmlattrdef("type")}}
- This attribute defines the styling language as a MIME type (charset should not be specified). This attribute is optional and default to
text/css
if it's missing. - {{htmlattrdef("media")}}
- This attribute defines which media the style should apply to. It's value is a media query, which default to
all
if the attribute is missing. - {{htmlattrdef("scoped")}}
- If this attribute is present, then the style applies only to its parent element. If absent, the style applies to the whole document.
- {{htmlattrdef("title")}}
- Specifies alternative style sheet sets.
- {{htmlattrdef("disabled")}}
- If set, disables (does not apply) the style rules, specified within the element, to the {{domxref("document","Document")}}.
Examples
A simple stylesheet
<style type="text/css"> body { color:red; } </style>
A scoped stylesheet
<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
{{ EmbedLiveSample('A_scoped_stylesheet', '100%', '200') }}
Specifications
Specification | Status | Comment |
---|---|---|
{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }} | {{ Spec2('HTML WHATWG') }} | No change from {{ SpecName('HTML5 W3C') }}. |
{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }} | {{ Spec2('HTML5 W3C') }} | Added the scoped attribute |
{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }} | {{ Spec2('HTML4.01') }} |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatGeckoDesktop(1.0)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
scoped |
20[1] | {{CompatGeckoDesktop(21.0)}}[2] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatGeckoDesktop(1.0)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
scoped |
{{CompatUnknown}} | {{CompatGeckoMobile(25.0)}}[2] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[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-classes, 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 {{HTMLElement("link")}} element allowing to use external style sheets.
{{HTMLRef}}