HTML <style> element

The <style> element embeds a CSS stylesheet in the document. In an ordinary page it belongs in the <head>. Its contents are CSS text, with both an opening and a closing tag.

An external stylesheet is referenced with <link> using rel="stylesheet". Embedded CSS is useful for a small standalone page; an external stylesheet allows several pages to share the same rules and resource.

CSS selectors determine which elements the rules affect. A style block is not automatically limited to nearby content. In the example below, .style-example selects the paragraph with that class and gives its text the colour tomato. Other paragraphs are unaffected by this rule.

The media attribute limits when the stylesheet applies. For example, media="print" applies it when printing, while a media query can limit it to particular viewport conditions. Omitting the attribute applies no media restriction.

The blocking attribute can request render blocking with blocking="render", so rendering waits for the stylesheet to be ready. A style element encountered by the HTML parser in the head normally already blocks rendering while its stylesheet is processed.

The global title attribute has a special meaning here: it names a CSS stylesheet set rather than supplying ordinary advisory text. This is used when organising named stylesheet choices.

The element has no visible box of its own. Its effect is shown by the coloured paragraph in the visual column.

Attributes: media, blocking, title, GLOBALS.

Typical layout:
<head>
  <style>
    .style-example { color: tomato; }
  </style>
</head>
<body>
  <p class="style-example">A coloured paragraph.</p>
</body>

Visual representation: