<style>

Summary

The HTML <style> element contains style information for a document, or a part of document. The specific style information is contained inside of this element, usually in the CSS.

Attributes

This element includes the global attributes.

type
This attribute defines the styling language as a MIME type (charset should not be specified). 'text/css' is assumed if this attribute is absent.
media
Which media should this style apply to. Should be a media query, see http://dev.w3.org/csswg/css3-mediaqueries.
scoped
If this attribute is present, then the style applies only to its parent element. If absent, the style applies to the whole document.
title
Specifies alternative style sheet sets.
disabled
If set, disables (does not apply) the style rules to the Document that are specified within the element.

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

Specifications

Specification Status Comment
WHATWG HTML Living Standard Living Standard No change from HTML5.
HTML5 Candidate Recommendation Added the scoped attribute
HTML 4.01 Specification Recommendation  

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] Not supported Not supported Not supported
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] Not supported Not supported Not supported

[1] Supported in Chrome 20+ by enabling the "Enable <style scoped>" or "experimental WebKit features" flag in chrome://flags.
[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 <link> element allowing to use external style sheets.

Document Tags and Contributors

Last updated by: yisi,