<style>: The Style Information element
BaselineWidely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
The<style>HTML 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.
Try it
<style> p { color: #26b72b; } code { font-weight: bold; }</style><p> This text will be green. Inline styles take precedence over CSS included externally.</p><p> The <code>style</code> attribute can override it, though.</p>p { color: #f00;}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 includemedia attributes that containmedia queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.
Attributes
This element includes theglobal attributes.
blockingThis attribute explicitly indicates that certain operations should be blocked on the fetching of critical subresources.
@import-ed stylesheets are generally considered as critical subresources, whereasbackground-imageand fonts are not. The operations that are to be blocked must be a space-separated list of blocking tokens listed below.render: The rendering of content on the screen is blocked.
mediaThis attribute defines which media the style should be applied to. Its value is amedia query, which defaults to
allif the attribute is missing.nonceA cryptographic nonce (number used once) used to allow inline styles in astyle-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.
titleThis attribute specifiesalternative style sheet sets.
Deprecated attributes
typeDeprecatedThis attribute should not be provided: if it is, the only permitted values are the empty string or a case-insensitive match for
text/css.
Examples
A basic stylesheet
In the following example, we apply a short stylesheet to a document:
<!doctype html><html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Test page</title> <style> p { color: red; } </style> </head> <body> <p>This is my paragraph.</p> </body></html>Result
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 equalspecificity.
<!doctype html><html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Test page</title> <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>Result
Including a media query
In this example we build on the previous one, including amedia attribute on the second<style> element so it is only applied when the viewport is less than 500px in width.
<!doctype html><html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Test page</title> <style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } </style> <style media="(width < 500px)"> p { color: blue; background-color: yellow; } </style> </head> <body> <p>This is my paragraph.</p> </body></html>Result
Technical summary
| Content categories | Metadata content. |
|---|---|
| Permitted content | Text content matching thetype attribute, that istext/css. |
| Tag omission | Neither tag is omissible. |
| Permitted parents | Any element that acceptsmetadata content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Norole permitted |
| DOM interface | HTMLStyleElement |
Specifications
| Specification |
|---|
| HTML # the-style-element |
Browser compatibility
See also
- The
<link>element, which allows us to apply external stylesheets to a document. - Alternative Style Sheets