style Element

Module

The style element is declared by the XHTML 1.1 Style Sheet Module

This is the only element in this Module.

Description

The style element may used within the head element of an XHTML document to specify, for example, CSS styles (see *CSS at the W3C for more information) which are specific to that particular document. Within the head is the only place within an XHTML 1.1 document where the style element may validly be used. The type attribute should be "text/css" for CSS styles.

<style type="text/css">
    div#main { color:#000; background:#fff url(bg.jpg) top left no-repeat }
</style>

A more elegant way to associate style information with a document, however, is to reference an external style sheet using a link element. This allows styles to be shared between documents easily and separates style information from document content. However, there may be times where it is more convenient to include style information within a document itself and, for this, the style element should be preferred over the deprecated style attribute.

The relative URI "bg.jpg" in the above example would be resolved with respect to the base URI (see the base element) of the document containing the style element. If this style rule were placed within an external stylesheet, however, this URI would instead be resolved relative to the URI of the external stylesheet itself.

Issues arising with style element content

In XHTML, the content of the style element is of type #PCDATA which means that the content of the element is parsed. This has the upshot that any ampersand or less-than characters within the style content must be escaped if the document is to pass W3C Validation. This may be done on a character-by-character basis or by enclosing content in a CDATA Section (unless that content contains the string ]]>). Escaping of such characters is not a problem unless the document is to be served as "text/html" - in which case you should use external style sheets if your style sheet contains any of the following:
< or & or ]]> or --
Ref: W3C Note (work in progress) *XHTML Media Types - Compatibility Guidelines - Item A.4. This is the same issue as arises with the script element but, since it is much less likely that style rules will include such characters or strings, it tends to be less of a concern with style.

Note: CDATA Sections are not supported by most HTML user agents (with Opera being a notable exception) when serving a document as "text/html". They should be supported, however, in compliant XHTML user agents where the XHTML has been served as "application/xhtml+xml" (see Serving XHTML 1.1).
Also: Similarly, the alternative method of individually escaping the problem characters in a script is not compatible with HTML since the content of style elements in a "text/html" document is not parsed and such escaped entities will not be expanded as desired.

Another consequence of the #PCDATA status of the style element's content is that any comments (opened by <!-- and closed by -->) within it should be discarded by the user agent's parser. This means that the common HTML practice of enclosing the entire style content within a comment (to prevent those legacy user agents which do not recognise the style element from rendering the style rules as document content) should not be followed in XHTML. However, such legacy user agents are so few and far between nowadays that I feel that the comment approach is not really necessary any more.

<style type="text/css">/*<![CDATA[*/
  div#bnb { color:#000; background:#ccc url(/pix/b&b.jpg) top center no-repeat }
/*]]>*/</style>

Whitespace within a style element is preserved.

#REQUIRED Attributes

The type attribute is #REQUIRED on the style element.

Specific Attributes

From the Style Sheet Module - the Element's own Module

media [ type MediaDesc ]

The medium or media for which the styles are to be applied, e.g. "screen"

type [ type ContentType - #REQUIRED ]

The content type of the style sheet language used within the element: CSS is specified as "text/css"

Common Attributes

From the Core Attribute Collection

id [ type ID ]

A unique identifier for the element

title [ type Text ]

A title for the element

xmlns [ type URI - #FIXED 'http://www.w3.org/1999/xhtml' ]

XML namespace

From the I18N Attribute Collection

dir [ type Enumeration (ltr | rtl) ], from the Bi-directional Text Module

Left-to-right or right-to-left directionality

xml:lang [ type LanguageCode ]

A language code for the element

Content Model

#PCDATA

See Content Model & Nesting for information about Content Model syntax and Nesting Groups.

Valid children of style

• #PCDATA

Valid parents of style

• From the Structure Module: head