A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets

A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets

Style sheets can be associated with documents using a list of link elements in the head. There are three different relationships external style sheets can have with the document: persistent, preferred, and alternate.

Persistent
These style sheets are always enabled (they are always “on”) and are combined with the active style sheet. They can be used for shared rules common to every style sheet. To make a style sheet persistent, the rel attribute is set to “stylesheet” and no title attribute is set.

To make the style sheet paul.css persistent, the following link element would be included in the head:

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

Preferred
These style sheets are enabled by default (they are “on” when the page is loaded). They can then be disabled if the user selects an alternate style sheet.

To make a style sheet preferred, the rel attribute is set to “stylesheet” and the style sheet is named with the title attribute.

Several preferred style sheets can be grouped together by giving them identical title attributes. These grouped style sheets are then all enabled and disabled together. If more than one group of preferred style sheets are declared, the first group takes precedence.

To make paul.css preferred, a title attribute is added, giving the default style a name.

<link rel="stylesheet" type="text/css" href="paul.css" title="bog standard" />

Alternate
These style sheets can be selected by the visitor as alternatives to the preferred style sheet. This allows the visitor to personalize a site and choose his or her favorite scheme. They can also be used for accessibility.

To specify an alternate style sheet, the rel attribute is set to “alternate stylesheet” and the style sheet is named with a title attribute. As with preferred sheets, these style sheets can also be grouped together by giving them identical title attributes.

Using the previous example again; to make paul.css into an alternate style sheet, the keyword “alternate” is added to the rel attribute.

<link rel="alternate stylesheet"
type="text/css" href="paul.css"
title="wacky" />

Note that these relationships only apply to external style sheets which are included using the link element.

example http://fantasai.inkedblade.net/

<link rel="stylesheet" href="site-style/base/content.css">
<link rel="stylesheet" href="site-style/swirls/content.css" title="Swirls" type="text/css">
<link rel="stylesheet alternate" href="site-style/elerentia/content.css" title="Elerentia" type="text/css">