← 4.2.5 The meta elementTable of contents4.3 Scripting →
      1. 4.2.6 The style element
      2. 4.2.7 Styling

4.2.6 The style element

Categories
Metadata content.
If the scoped attribute is present: flow content.
Contexts in which this element can be used:
If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content is expected, but before any other flow content other than other style elements and inter-element whitespace.
Content model:
Depends on the value of the type attribute, but must match requirements described in prose below.
Content attributes:
Global attributes
media
type
scoped
Also, the title attribute has special semantics on this element.
DOM interface:
interface HTMLStyleElement : HTMLElement {
           attribute boolean disabled;
           attribute DOMString media;
           attribute DOMString type;
           attribute boolean scoped;
};
HTMLStyleElement implements LinkStyle;

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]

The media attribute says which media the styles apply to. The value must be a valid media query.

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 set, 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.

The title attribute on style elements defines alternative style sheet sets. If the style element has no title attribute, then it has no title; the title attribute of ancestors does not apply to the style element. [CSSOM]

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]

style         = no-c-start *( c-start no-c-end c-end no-c-start )
no-c-start    = <any string that doesn't contain a substring that matches c-start >
c-start       = "<!--"
no-c-end      = <any string that doesn't contain a substring that matches c-end >
c-end         = "-->"

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 disabled IDL attribute behaves as defined for the alternative style sheets DOM.

The LinkStyle interface is also implemented by this element; the styling processing model defines how. [CSSOM]

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>

4.2.7 Styling

The link and style elements can provide styling information for the user agent to use when rendering the document. The DOM Styling specification specifies what styling information is to be used by the user agent and how it is to be used. [CSSOM]

The style and link elements implement the LinkStyle interface. [CSSOM]