XHTML Mobile Profile and CSS Reference: Applying Style Sheets to Documents

Applying Style Sheets to Documents

You can apply the rules in a style sheet to the contents of an XHTML-MP document in a number of ways:

By using the <link> element to link the XHTML-MP document to an external style sheet
By using @import rules in the <style> element to link the XHTML-MP document to an external style sheet
By including an internal style sheet directly in an XHTML-MP document, in its <style> element
By including style rules in the style attribute of any element that supports their inclusion

In fact, you can use some or all of these techniques in the same document, using the cascade to determine how one overrides the other (see The Cascade for details).

Using the <link> Element to Apply an External Style Sheet

You can use the XHTML-MP <link> element to apply an external (separate) CSS file to the contents of an XHTML-MP document.

The <link> element is contained in the <head> element.

The following XHTML-MP excerpt applies the style rules contained in the external file stylesheet.css to the contents of the current document:

<head>
    <title>External Style Sheet</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

See <link> for details about this XHTML-MP element.

Using @import Rules to Apply an External Style Sheet

You can include one or more @import rules in the XHTML-MP <style> element to apply the style rules contained in external CSS files to the contents of an XHTML-MP document.

You can also use @import rules in stand-alone style sheet files to import the rules from other style sheet files. (If you do, the @import rules must be the first rules in the file.)

The <style> element is contained in the <head> element.

Each @import rule follows the syntax:

@import "stylesheet.css";

@import url("http://www.example.com/stylesheet.css");

The following excerpt from an XHTML-MP document applies the style rules in the external file stylesheet.css to the contents of the current document:

<head>
    <title>External Style Sheet</title>
        <style type="text/css">
            @import "stylesheet.css";
        </style>

See <style> for more information about this XHTML-MP element.

Using the <style> Element to Apply an Internal Style Sheet

You can use the XHTML-MP <style> element to apply the rules of an internal style sheet to the contents of an XHTML-MP document.

The <style> element is contained in the <head> element, and should follow the <title> element and <link> element (if any). Internal style sheet rules contained in the <style> element must follow any @import and @media declarations.

The following example applies two rules about the display of first-level heads and unordered list items to the contents of the current document:

<head>
    <title>Internal Style Sheet</title>
    <style type="text/css">
        h1 {color: red}
        ul>li {list-style-type: square; color: blue}
    </style>
</head>

See <style> for more information about this XHTML-MP element.

Using the style Attribute to Apply Styles to Individual Elements

Although it's preferable to set style rules for a whole document, you can also set a one-time-only rule for XHTML-MP elements that support the style attribute. Style rules set using a style attribute override both external style sheets and internal style sheets (see The Cascade for more information). The following example sets paragraph text to red and a larger font:

<p style="color: red; font-size: 1.5em">A paragraph of text.</p>