Switching Style Sheets (Part I)

published by Dan in CSS with 1 Comment

Using CSS to control what your website looks like is the first step towards a good website design. To give more options to your users, you may implement way to dynamically switch between different style sheets.As you know, external stylesheets can be associated with documents using a list of link elements in the head. Three different relationships exist between your document and external stylesheets: persistent, preferred, and alternate.

Persistent
Persistent stylesheets are enabled and are combined with the current active stylesheet of the document. Persistent stylesheets can be used to apply a fixed and common style to all stylesheets. To make a style sheet persistent, set the rel attribute to “style sheet” and don’t set the title attribute

Example:

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

Preferred
Preferred style sheets are enabled when the document is first loaded. They can be disabled if the users selects an alternate style sheet. To make a style sheet preferred, set the rel attribute to “style sheet” and name the style sheet with the title attribute.

Example:

<link rel="stylesheet"
type="text/css" href="example.css"
title="Default_Style" />

You can also group multiple style sheets by naming them using the same title attribute. If more than one type of preferred style sheet is specified, the type declared first takes precedence.

Alternate
Alternate style sheets are not enabled by default but they can be selected by the user as alternatives to the preferred style sheet. To specify an alternate style sheet, set the rel attribute to “alternate stylesheet” and name the style sheet with the title attribute.

Example:

<link rel="alternate stylesheet"
type="text/css" href="example.css"
title="alternate_style" />

Next post I will continue with ways of implementing the style sheet switching mechanism.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

RSS feed | Trackback URI

One response to Switching Style Sheets (Part I)