17. XHTML Style Sheet Module


This section is normative.

The Style Sheet Module defines an element to be used when declaring internal style sheets. The element and attributes defined by this module are:

Elements Attributes Minimal Content Model
style Common, media (MediaDesc) PCDATA

When this module is used, it adds the style element to the content model of the head element of the Structure Module.

Implementation: DTD

17.1. The style element


The Common collection
A collection of other attribute collections, including: Core, Events, I18N, Bi-directional, Edit, Embedding, and Hypertext
media = MediaDesc
The value of this attribute specifies the type of media for which the element is intended.
rel = LinkTypes
This attribute describes the relationship from the current document to the URI referred to by the element. The value of this attribute is a space-separated list of link types.

The style element allows an author to put style sheet rules in the head of the document. XHTML permits any number of style elements in the head section of a document.

User agents that don't support style sheets, or don't support the specific style sheet language used by a style element, must hide the contents of the style element. It is an error to render the content as part of the document's text.

The syntax of style data depends on the style sheet language.

Rules for style rule precedences and inheritance depend on the style sheet language.

The following CSS style declaration puts a border around every h1 element in the document and centers it on the page.

 <style type="text/css">
   h1 {border-width: thin; border-style: solid; text-align: center}

To specify that this style information should only apply to h1 elements of a specific class, we modify it as follows:

 <style type="text/css">
   h1.myclass {border-width: thin; border-style: solid; text-align: center}
 <h1 class="myclass"> This h1 is affected by our style </h1>
 <h1> This one is not affected by our style </h1>

Finally, to limit the scope of the style information to a single instance of h1, set the id attribute:

 <style type="text/css">
   #myid {border-width: thin; border-style: solid; text-align: center}
 <h1 class="myclass"> This h1 is not affected </h1>
 <h1 id="myid"> This h1 is affected by style </h1>
 <h1> This h1 is not affected </h1>

Although style information may be set for almost every XHTML element, two elements, div and span, are particularly useful in that they do not impose any presentation semantics (besides block-level vs. inline). When combined with style sheets, these elements allow users to extend XHTML indefinitely, particularly when used with the class and id attributes.

In the following example, we use the span element to set the font style of the first few words of a paragraph to small caps.

 <style type="text/css">
  span.sc-ex { font-variant: small-caps }
  <p><span class="sc-ex">The first</span> few words of
  this paragraph are in small-caps.</p>

In the following example, we use div and the class attribute to set the text justification for a series of paragraphs that make up the abstract section of a scientific article. This style information could be reused for other abstract sections by setting the class attribute elsewhere in the document.

 <style type="text/css">
   div.Abstract { text-align: justify }
 <div class="Abstract">
   <p>The Chieftain product range is our market winner for
     the coming year. This report sets out how to position
     Chieftain against competing products.</p>

   <p>Chieftain replaces the Commander range, which will
     remain on the price list until further notice.</p>

17.1.1. External style sheets

Authors may separate style sheets from XHTML documents. This offers several benefits:

17.1.2. Preferred and alternate style sheets

XHTML allows authors to associate any number of external style sheets with a document. The style sheet language defines how multiple external style sheets interact (for example, the CSS "cascade" rules).

Authors may specify a number of mutually exclusive style sheets called alternate style sheets. Users may select their favorite among these depending on their preferences. For instance, an author may specify one style sheet designed for small screens and another for users with weak vision (e.g., large fonts). User agents should allow users to select from alternate style sheets.

The author may specify that one of the alternates is a preferred style sheet. User agents should apply the author's preferred style sheet unless the user has selected a different alternate.

Authors may group several alternate style sheets (including the author's preferred style sheets) under a single style name. When a user selects a named style, the user agent must apply all style sheets with that name. User agents must not apply alternate style sheets with a different style name. The section on specifying external style sheets explains how to name a group of style sheets.

Authors may also specify persistent style sheets that user agents must apply in addition to any alternate style sheet.

User agents must respect media descriptors when applying any style sheet.

User agents should also allow users to disable the author's style sheets entirely, in which case the user agent must not apply any persistent or alternate style sheets.

17.1.3. Specifying external style sheets

Authors specify external style sheets with the following attributes of the link element:

User agents should provide a means for users to view and pick from the list of alternate styles. The value of the title attribute is recommended as the name of each choice.

In this example, we first specify a persistent style sheet located in the file mystyle.css:

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

Setting the title attribute makes this the author's preferred style sheet:

 <link href="mystyle.css" title="compact" rel="stylesheet" type="text/css"/>

Adding the keyword "alternate" to the rel attribute makes it an alternate style sheet:

<link href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css"/>

For more information on external style sheets, please consult the section on links and external style sheets.

If two or more link elements specify a preferred style sheet, the first one takes precedence.