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 can be included inside the <head> or <body> of the document, and the styles will still be applied, however it is recommended that you include your styles in the <head> for organizational purposes — it is a lot better to separate your content from your presentation as much as possible. Even better, 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 — there is very little reason to include this 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.

Styling with CSS

The <style> element itself has no visual representation, therefore it has no styling considerations.

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 include two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one.

<!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.
Permitted ARIA roles None
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 No change from HTML 4.01 Specification.
HTML 4.01 Specification
The definition of 'style' in that specification.
Recommendation  

Browser compatibility

The information shown below has been pulled from MDN's Github (https:/github.com/mdn/browser-compat-data)

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes133.51
type1 Yes133.51
media1 Yes133.51
title1 Yes133.51
scoped19 — 351 No21 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support11 Yes461 Yes
type11 Yes461 Yes
media11 Yes461 Yes
title11 Yes461 Yes
scoped No No No21 No No No

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

See also