<style>: The Style Information element

The HTML <style> element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element.

The <style> element must be included inside the <head> of the document. In general, it is better to put your styles in external stylesheets and apply them using <link> elements.

If you include multiple <style> and <link> elements in your document, they will be applied to the DOM in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues.

In the same manner as <link> elements, <style> elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.

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 defaults to text/css if it is not specified; values other than the empty string or text/css are not used. Note: There is very little reason to include this attribute in modern web documents.
media
This attribute defines which media the style should be applied to. Its value is a media query, which defaults to all if the attribute is missing.
nonce
A cryptographic nonce (number used once) used to whitelist inline styles in a style-src Content-Security-Policy. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource’s policy is otherwise trivial.
title
This attribute specifies alternative style sheet sets.

Deprecated attributes

scoped

This attribute specifies that the styles only apply to the elements of its parent(s) and children.

This attribute may be re-introduced in the future per https://github.com/w3c/csswg-drafts/issues/3547. If you want to use the attribute now, you can use a polyfill.

Examples

A simple stylesheet

In the following example, we apply a very simple stylesheet to a document:

<!doctype html>
<html>
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

Multiple style elements

In this example we've included two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity.

<!doctype html>
<html>
<head>
  <style>
    p {
      color: white;
      background-color: blue;
      padding: 5px;
      border: 1px solid black;
    }
  </style>
  <style>
    p {
      color: blue;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

Including a media query

In this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500px in width.

<!doctype html>
<html>
<head>
  <style>
    p {
      color: white;
      background-color: blue;
      padding: 5px;
      border: 1px solid black;
    }
  </style>
  <style media="all and (max-width: 500px)">
    p {
      color: blue;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

Technical summary

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 parents Any element that accepts metadata content.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLStyleElement

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'style' in that specification.		 Living Standard
HTML5
The definition of 'style' in that specification.		 Recommendation The type attribute becomes optional.
HTML 4.01 Specification
The definition of 'style' in that specification.		 Recommendation

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
styleChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
mediaChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
scoped
DeprecatedNon-standard
Chrome No support 19 — 35
Disabled
No support 19 — 35
Disabled
Disabled From version 19 until version 35 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support 55 — 61
Notes Disabled
No support 55 — 61
Notes Disabled
Notes This attribute was hidden behind a pref because no other browsers support it (See bug 1291515).
Disabled From version 55 until version 61 (exclusive): this feature is behind the layout.css.scoped-style.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 21 — 55
IE No support NoOpera No support 15 — 22
Disabled
No support 15 — 22
Disabled
Disabled From version 15 until version 22 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true).
Safari No support NoWebView Android No support NoChrome Android No support 25 — 35
Disabled
No support 25 — 35
Disabled
Disabled From version 25 until version 35 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Firefox Android No support 55 — 61
Notes Disabled
No support 55 — 61
Notes Disabled
Notes This attribute was hidden behind a pref because no other browsers support it (See bug 1291515).
Disabled From version 55 until version 61 (exclusive): this feature is behind the layout.css.scoped-style.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 21 — 55
Opera Android No support 14 — 22
Disabled
No support 14 — 22
Disabled
Disabled From version 14 until version 22 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true).
Safari iOS No support NoSamsung Internet Android No support 1.5 — 3.0
titleChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
typeChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Prior to 75, Firefox accepted any CSS media (MIME) type, with optional parameters. Starting in 75, this has been restricted to the string 'text/css', per the spec.
IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support
Full support
No support
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also