4.2.6 The style element

The style element allows authors to embed style information in their documents. The style element is one of several inputs to the styling processing model. The element does not represent content for the user.

The type attribute gives the styling language. If the attribute is present, its value must be a valid MIME type that designates a styling language. The charset parameter must not be specified. The default value for the type attribute, which is used if the attribute is absent, is "text/css". [RFC2318]

When examining types to determine if they support the language, user agents must not ignore unknown MIME parameters — types with unknown parameters must be assumed to be unsupported. The charset parameter must be treated as an unknown parameter for the purpose of comparing MIME types here.

The media attribute says which media the styles apply to. The value must be a valid media query. The user agent must apply the styles when the media attribute's value matches the environment and the other relevant conditions apply, and must not apply them otherwise.

The styles might be further limited in scope, e.g. in CSS with the use of @media blocks. This specification does not override such further restrictions or requirements.

The default, if the media attribute is omitted, is "all", meaning that by default styles apply to all media.

The scoped attribute is a boolean attribute. If present, it indicates that the styles are intended just for the subtree rooted at the style element's parent element, as opposed to the whole Document.

If the scoped attribute is present and the element has a parent element, then the style element must be the first node of flow content in its parent element other than inter-element whitespace, and the parent element's content model must not have a transparent component.

This implies that only one scoped style element is allowed at a time, and that such elements cannot be children of, e.g., a or ins elements, even when those are used as flow content containers.

If the scoped attribute is present, then the user agent must apply the specified style information only to the style element's parent element (if any), and that element's descendants. Otherwise, the specified styles must, if applied, be applied to the entire document.

The following will eventually be moved to a CSS specification; it is specified here only on an interim basis until an editor can be found to own this.

Within scoped CSS resources, authors may use an @global @-rule. The syntax of this rule is defined as follows.

The following production is added to the grammar:

global
  : GLOBAL_SYM S* ruleset
  ;

The following rules are added to the Flex tokenizer:

B                     b|\\0{0,4}(42|62)(\r\n|[ \t\r\n\f])?
@{G}{L}{O}{B}{A}{L}   {return GLOBAL_SYM;}

Simple selectors in rule sets prefixed by the @global @-rule in scoped CSS resources must be processed in the same way as normal rule sets in non-scoped CSS resources.

Simple selectors in scoped CSS resources that are not prefixed by an @global @-rule must only match the style element's parent element (if any), and that element's descendants.

For scoped CSS resources, the effect of other @-rules must be scoped to the scoped sheet and its subresources, even if the @-rule in question would ordinarily apply to all style sheets that affect the Document. Any '@page' rules in scoped CSS resources must be ignored.

For example, an '@font-face' rule defined in a scoped style sheet would only define the font for the purposes of font rules in the scoped section; style sheets outside the scoped section using the same font name would not end up using that embedded font.

The title attribute on style elements, like the title attribute on link elements, differs from the global title attribute in that a style block without a title does not inherit the title of the parent element: it merely has no title.

The textContent of a style element must match the style production in the following ABNF, the character set for which is Unicode. [ABNF]

All descendant elements must be processed, according to their semantics, before the style element itself is evaluated. For styling languages that consist of pure text (as opposed to XML), user agents must evaluate style elements by passing the concatenation of the contents of all the Text nodes that are children of the style element (not any other nodes such as comments or elements), in tree order, to the style system. For XML-based styling languages, user agents must pass all the child nodes of the style element to the style system.

All URLs found by the styling language's processor must be resolved, relative to the element (or as defined by the styling language), when the processor is invoked.

Once the attempts to obtain the style sheet's critical subresources, if any, are complete, or, if the style sheet has no critical subresources, once the style sheet has been parsed and processed, the user agent must, if the loads were successful or there were none, queue a task to fire a simple event named load at the style element, or, if one of the style sheet's critical subresources failed to completely load for any reason (e.g. DNS error, HTTP 404 response, a connection being prematurely closed, unsupported Content-Type), queue a task to fire a simple event named error at the style element. Non-network errors in processing the style sheet or its subresources (e.g. CSS parse errors, PNG decoding errors) are not failures for the purposes of this paragraph.

The task source for these tasks is the DOM manipulation task source.

The element must delay the load event of the element's document until all the attempts to obtain the style sheet's critical subresources, if any, are complete.

This specification does not specify a style system, but CSS is expected to be supported by most Web browsers. [CSS]

The media, type and scoped IDL attributes must reflect the respective content attributes of the same name.

The following document has its emphasis styled as bright red text rather than italics text, while leaving titles of works and Latin words in their default italics. It shows how using appropriate elements enables easier restyling of documents.

<!DOCTYPE html>
<html lang="en-US">
 <head>
  <title>My favorite book</title>
  <style>
   body { color: black; background: white; }
   em { font-style: normal; color: red; }
  </style>
 </head>
 <body>
  <p>My <em>favorite</em> book of all time has <em>got</em> to be
  <cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
  about the <i lang="la">Felis Catus</i> in modern human society.</p>
 </body>
</html>

HTML5

4.2.6 The `style` element