style
elementscoped
attribute is present: flow content.scoped
attribute is absent: where metadata content is expected.scoped
attribute is absent: in a noscript
element that is a child of a head
element.scoped
attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace, and not as the child of an element whose content model is transparent.type
attribute, but must match requirements described in prose below.media
type
scoped
title
attribute has special semantics on this element.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]
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 either the scoped sheet and its subresources or to the
subtree rooted at the style
element's parent (if any),
even if the @-rule in question would ordinarily apply to all style
sheets that affect the Document
, or to all nodes in 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 elements in the scoped section; the font would not be used for elements outside the subtree. However, rules outside the subtree that refer to font names declared in '@font-face' rules in a scoped section, when those rules are inherited by nodes in the scoped section, would end up referring to the fonts declared in that section.
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 = "-->"
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 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 stress 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>