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 source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 ortext/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 StandardThe definition of 'style' in that specification. | Living Standard | |
HTML5The definition of 'style' in that specification. | Recommendation | The type attribute becomes optional.
|
HTML 4.01 SpecificationThe definition of 'style' in that specification. | Recommendation |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
style
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 3 |
Opera
Full support 3.5 |
Safari
Full support 1 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
media
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 3 |
Opera
Full support 3.5 |
Safari
Full support 1 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
|
Chrome No support 19 — 35 No support 19 — 35 Disabled' From version 19 until version 35 (exclusive): this feature is behind the |
Edge
No support No |
Firefox No support 55 — 61 No support 55 — 61 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 |
IE
No support No |
Opera No support 15 — 22 No support 15 — 22 Disabled' From version 15 until version 22 (exclusive): this feature is behind the |
Safari
No support No |
WebView Android
No support No |
Chrome Android No support 25 — 35 No support 25 — 35 Disabled' From version 25 until version 35 (exclusive): this feature is behind the |
Firefox Android No support 55 — 61 No support 55 — 61 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 |
Opera Android No support 14 — 22 No support 14 — 22 Disabled' From version 14 until version 22 (exclusive): this feature is behind the |
Safari iOS
No support No |
Samsung Internet Android
No support 1.5 — 3.0 |
title
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 3 |
Opera
Full support 3.5 |
Safari
Full support 1 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
type
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 1 Full support 1 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 3 |
Opera
Full support 3.5 |
Safari
Full support 1 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung 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
- The
<link>
element, which allows us to apply external stylesheets to a document. - Alternative Style Sheets
<style>: The Style Information element by Mozilla Contributors is licensed under CC-BY-SA 2.5.