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

Attributes

This element includes the global attributes.

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.
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.
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.

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
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  

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.

Document Tags and Contributors

Tags: 
 Contributors to this page: bouzlibop, teoli, MarkBeleski, Sebastianz, fjanon, Jeremie, Nexii, Mr_Keto, yisi, kscarfone, justleroy, ethertank, Brettz9, Sheppy, trevorh, medicdude, Marsf, ebidel, fscholz, McGurk, osdm
 Last updated by: bouzlibop,