HTML <style> tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

Definition

The <style> tag contains CSS, a language used to style the web page or parts of it.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Title Element goes here.</title>
    <style>
      h1 {
        color: orange;
        font-family: arial;
      }
      p {
        color: purple;
        font-family: georgia;
      }
    </style>
  </head>
  <body>
    <h1>Displayed Page Title</h1>
    <p>The main content of your page goes here.</p>
  </body>
</html>

Usage

  • Both the opening and closing tags are required.
  • The <style> element should be placed in the <head> of the document.
  • The <style> tags should contain CSS declarations. These declarations will be processed in order and apply styling to the page or parts of it.
  • You can use multiple <style> and <link> declarations together.

Attributes

The <style> element supports the Global Attributes, as well as the following:

  • type

    The type element specifies the media type of the linked document.

  • media

    The media attribute specifies the media or device the target document is optimized for. The following example will only apply to browsers with a screen of 600px wide, or less:

    <style>
    @media only screen and (max-width: 600px) {
      h1 {color:orange; font-family:arial;}
      p {color:purple; font-family:georgia;}
    }
    </style>

  • nonce

    A nonce attribute is a security feature where a server will transmit a cryptographic nonce (number used once) so that only <style> elements that match the Content-Security-Policy will be permitted. For example:

    Content-Security-Policy: style-src 'nonce-1736c3526c'
    <style nonce="nonce-1736c3526c">
      h1 {color:orange; font-family:arial;}
      p {color:purple; font-family:georgia;}
    </style>

  • title

    The title attribute has a particular context when used in <style> elements. Firefox allows you to name alternate stylesheets that can be selected in Firefox via the View -> Page Style submenu. You can view an example of this in action here.

Best Practices

  • You may wish to consider putting your CSS styles in an external stylesheet and applying them to the document using the <link> element. The best practice is to inline critical CSS required to render the initial loading of the page (above the fold content), and put the rest of the styles in an external stylesheet.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes