Correctly Using Titles With External Stylesheets

External stylesheets are often associated with HTML documents using the <link rel="stylesheet"> element, but it is important to use the element's title attribute properly.

This is because the title attribute on a <link rel="stylesheet"> element makes it either preferred or an alternative style sheet. This can lead to a stylesheet being ignored, which is typically not what an author intends to do.

Why Titles Matter

The title attribute affects how your external stylesheet is applied to a document. In fact, the use of the title attribute is so significant that HTML 4.01 categorizes stylesheets according to the presence or absence of a title. By including a title attribute, you can control whether a particular stylesheet always affects a document, or if it is only used under certain circumstances.

There are three kinds of stylesheets that are possible: persistent, preferred, and alternate stylesheets.

Authors will be most familiar with persistent stylesheets, of which any number may be applied to a document at once. A persistent stylesheet is one which has no title attribute and a value of stylesheet supplied for the rel attribute. A document may refer to one or more persistent stylesheets, all of which are used in the presentation of the document.

A preferred stylesheet, on the other hand, is one that has a value of stylesheet supplied for the rel attribute, and any value at all for the title attribute. Here are two examples:

<link type="text/css" rel="stylesheet" title="Basic styles" href="basic.css" />
<link type="text/css" rel="stylesheet" title="Fish and boats" href="ocean.css" />

According to the HTML 4.01 specification, only one of the preferred stylesheets can be used at a time. Therefore, given the above example, only one of the two preferred stylesheets will be applied to the document. The specification does not supply a procedure to decide which one should be used, so user agents are free to make whatever choice they like.

Therefore, any link to a stylesheet that includes a title attribute cannot be persistent, and is likely to be ignored by the Web browser. Any link element referring to a stylesheet with a title attribute must be either preferred or alternate, depending on the value of the rel attribute.

In a document that refers to alternate stylesheets, the preferred stylesheet will be used so long as none of the alternate stylesheets are selected by the user. Thus, when the document is loaded, the browser will use all of the persistent stylesheets and one preferred stylesheet (but remember, there should only be one preferred stylesheet). Once the user selects one of the alternate stylesheets, the preferred stylesheet will no longer be used, although the user can always re-select the preferred stylesheet.

The primary use for preferred stylesheets is to designate one stylesheet as preferred for the document display; that is, it is the "default" presentation. If any alternate stylesheet is selected, then the preferred stylesheet is dropped in favor of the user-selected alternate stylesheet. This is different than persistent stylesheets, which are always applied to a document, whether an alternate stylesheet has been selected or not.

Recommendations

Authors should make sure that any stylesheet which should always be applied is persistent instead of preferred. To quote from HTML 4.01 Specification, section 14.3.1:

• To make a style sheet persistent, set the rel attribute to "stylesheet" and don't set the title attribute.
• To make a style sheet preferred, set the rel attribute to "stylesheet" and name the style sheet with the title attribute.

Related Links

• HTML 4.01 Specification, section 14.3: External style sheets