Referencing an External Style Sheet Using a link Element or @import At-rule

Here’s an example of an external style sheet reference that uses a link element:

<link rel="stylesheet" type="text/css" href="/style.css"
    media="screen">

The link element, which must reside within the head element of an HTML document, links an external style sheet to the document. Multiple, comma-separated media types can be specified in the media attribute, for example, media="screen,projection". If it’s omitted, this attribute defaults to media="screen", according to the HTML4 specification, but in reality, browsers seem to apply media="all" if the attribute is omitted.

Here’s an example of a style sheet reference that uses an @import at-rule:

<style type="text/css">
  @import url(/style.css);
</style>

The style element, like the link element, must reside within the head element.

Relative URIs in the href attribute or @import rule are relative to the HTML document that contains the link. (When @import is used inside an external style sheet, relative URIs are relative to the importing style sheet.)

The link element can also be used to link to an alternative style sheet:

<link rel="alternate stylesheet" type="text/css"
    href="/contrast.css" media="screen" title="High contrast">

This alternative style sheet, which is disabled by default, can be enabled by the user if the browser supports alternative style sheets. All style sheets with the same title attribute will be enabled or disabled as a group. Alternative style sheets are mutually exclusive, so enabling one group will automatically disable all other groups.

A style sheet that’s linked with rel="stylesheet" but lacks a title attribute, like the first example in this section, is known as a persistent style sheet. It will always be applied—even if an alternative style sheet is enabled by the user.

A style sheet that’s linked with rel="stylesheet", and for which a title attribute has been specified, is known as a preferred style sheet. It will be applied unless the user has enabled an alternative style sheet.

Let’s take a look at a more complex example:

<link rel="stylesheet" type="text/css"
    href="/base.css" media="all">

<link rel="stylesheet" type="text/css"
    href="/def_layout.css" media="screen" title="Default">

<link rel="stylesheet" type="text/css"
    href="/def_colour.css" media="screen" title="Default">

<link rel="alternate stylesheet" type="text/css"
    href="/alt_layout.css" media="screen" title="Custom">

<link rel="alternate stylesheet" type="text/css"
    href="/alt_colour.css" media="screen" title="Custom">

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

Here, base.css is a persistent style sheet, as it doesn’t have a title attribute; it will always be applied for all media types, since it has the attribute media="all".

By default, def_layout.css and def_colour.css will also be applied for screen media, since they’re preferred style sheets.

If the user selects Custom style sheets in the browser, as depicted in Figure 1, def_layout.css and def_colour.css will be disabled, and alt_layout.css and alt_colour.css will be enabled.

Figure 1. Selecting alternative style sheets in Firefox

When printing, or in print preview, print.css will be applied since it has the attribute media="print". Note that base.css will also be applied since it specifies media="all". The other four style sheets will not be applied here, however, since they specify only screen media.

We can use the alternative style sheet feature to offer multiple viewing options from which the user can make a selection. In Eric Meyer’s Complex Spiral Demo, the user is able to select from one of many available alternative style sheets, as depicted in Figure 2.

Figure 2. Alternative style sheets in the Complex Spiral Demo

Using an Internal Style Sheet

The style element, which must reside within the head element of an HTML document, specifies an internal style sheet which will only apply to elements in the enclosing document:

<style type="text/css" media="screen,projection">
  ⋮ CSS rules…
</style>

The type attribute is required, and should have the value "text/css" which denotes CSS styles. As in the case of external style sheets, the media attribute defaults to "screen" if you omit it, according to the HTML4 specification, but in reality, browsers seem to apply media="all" if the attribute is omitted.

Pre-HTML4 browsers don’t support the <style> element—they’ll render the element’s content as text. As a special case, an SGML comment surrounding the content in its entirety will be ignored in CSS-compatible browsers. Note, however, that this applies only to HTML. It doesn’t apply to XHTML served as XML—there, such a comment will be treated as a comment, effectively hiding all the CSS.

The practice of commenting out the content of <style> elements is archaic and unnecessary, since very few pre-HTML4 browsers are in regular use these days. It’s harmless in HTML, but must be avoided in XHTML—even if served as text/html—to ensure that such a document will still work when served as XML.

Here’s an example of an internal style sheet in HTML, which is hidden from ancient browsers:

<style type="text/css" media="screen,projection">
<!--
 ⋮ CSS rules…
-->
</style>

Using Inline Styles

The following inline CSS will make the font size of an unordered list 120% of what it would normally be. It will also make the text and the list bullet points dark green:

<ul style="font-size:120%; color:#060">
  ⋮ list items…
</ul>

Using style attributes creates a strong coupling between the content and the presentation, which is usually undesirable.

Inline CSS is more limited than internal or external style sheets. It’s not possible to specify a media type, so style attributes will apply for all media types. Also, you can’t specify inline CSS rules for pseudo-classes or pseudo-elements.

If you use inline CSS, the HTML specification states that you must declare the style language. You can do so using a HTTP header or an equivalent <meta> element:

<meta http-equiv="Content-Style-Type" content="text/css">

In reality, browsers don’t care because the HTML specification also states that the style content type defaults to "text/css" if it’s not specified in a <meta> element or a Content-Style-Type HTTP header.

Yes, it may seem that the statements “you must declare the style language” and “the style content type defaults to "text/css" if not specified” are mutually exclusive, but the intent was only to provide a safety net. The specification recommends that authoring tools automatically generate the style sheet language information in order to avoid forcing user agents to rely on the default value. The effectiveness of this recommendation remains to be seen.

Referencing an External Style Sheet Using an XML PI

In XML documents, including XHTML served as XML, an external style sheet can be referenced using a processing instruction (PI). Such processing instructions are normally part of the XML prologue, coming after the XML declaration, but before the doctype declaration (if there is one) and the root element’s start tag.

This example shows an XML prologue with a persistent style sheet (base.css), a preferred style sheet (default.css), and an alternative style sheet (custom.css):

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="/base.css"?>
<?xml-stylesheet type="text/css" href="/default.css"
    title="Default"?>
<?xml-stylesheet type="text/css" href="/custom.css"
    title="Custom" alternate="yes"?>

Differences Between the Methods

In addition to the differences that exist in the ways the style sheets or CSS rules are specified in the markup, there are a few other differences that we may need to consider, depending on which method we choose:

• An external style sheet can’t contain SGML comments (<!-- … -->) or HTML tags (including <style> and </style>). Nor can it use SGML character references (such as ©) or character entity references (such as ©). If you need to use special characters in an external style sheet, and they can’t be represented through the style sheet’s character encoding, specify them with CSS escape notation.
• The content type of the style element type in HTML is CDATA, which means that character references (numeric character references or character entity references) in an internal style sheet aren’t parsed. If you need to use special characters in an internal style sheet, and they can’t be represented with the document’s character encoding, specify them with CSS escape notation. In XHTML, the content type is #PCDATA, which means that character references are parsed, but only if the document’s served as XML.
• Unlike in style elements, character references are parsed in style attributes, even in HTML.