Style

<style>: The Style Information element #

::: section-content 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 #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <style> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-standard .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

<p>This text will be green. Inline styles take precedence over CSS included externally.</p>

<p style="color: blue">The <code>style</code> attribute can override it, though.</p>

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} p { color: #f00; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: :::

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 #

::: section-content This element includes the global attributes.

blocking [Experimental]{.visually-hidden}

This attribute explicitly indicates that certain operations should be blocked on the fetching of critical subresources. @import-ed stylesheets are generally considered as critical subresources, whereas background-image and fonts are not.

  • render: The rendering of content on the screen is blocked.
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 allow 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 #

::: section-content

type [Deprecated]{.visually-hidden}

This 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 simple stylesheet #

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

::: code-example [html]{.language-name}

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

::: {#sect1 .code-example} ::: iframe ::: ::: :::

Multiple style elements #

::: section-content 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.

::: code-example [html]{.language-name}

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

::: {#sect2 .code-example} ::: iframe ::: ::: :::

Including a media query #

::: section-content 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.

::: code-example [html]{.language-name}

<!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="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>

:::

Result #

::: {#sect3 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

Content categoriesMetadata content, and if the scoped attribute is present: flow content.
Permitted contentText content matching the type attribute, that is text/css.
Tag omissionNeither tag is omissible.
Permitted parentsAny element that accepts metadata content.
Implicit ARIA roleNo corresponding role
Permitted ARIA rolesNo role permitted
DOM interfaceHTMLStyleElement
:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-style-element]{.small}

:::

Browser compatibility #

::: _table #

           Desktop                                                      Mobile                                           

           Chrome    Edge   Firefox         Internet   Opera   Safari   WebView   Chrome    Firefox   Opera     Safari   Samsung
                                            Explorer                    Android   Android   for       Android   on IOS   Internet
                                                                                            Android

style 1 12 1 3 3.5 1 4.4 18 4 10.1 1 1.0

blocking 105 105 No No 91 No 105 105 No 72 No 20.0

media 1 12 1 3 3.5 1 4.4 18 4 10.1 1 1.0

title 1 12 1 3 3.5 1 4.4 18 4 10.1 1 1.0

type 1 12 1 3 3.5 1 4.4 18 4 10.1 1 1.0

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

:::

See also #

::: section-content

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style{._attribution-link} :::

Calendar December 2, 2023
Edit Edit this page