CSS Alternate Stylesheet

a computer and an alternate computer

Creating a CSS alternate stylesheet is a useful way to cater to many different needs of your users. Even better, integrating them into your page is as easy as adding a single word to an already-familiar tag.

Preferred, Persistent, and Alternate

Creating a stylesheet can be a fun exercise in creativity and design. What's even more fun is when you create a different stylesheet for the same site and discover just how easy it is to create and change your page's appearance. With a few simple commands, you can use this flexibility to benefit your visitors.

For example, you may want to have a particular look for your site on a web browser, but a totally different layout for iPhone users so that your content is more readable on a small screen. Sometimes designers want sites to look different depending on the country where the site is viewed, or even the time of day or the weather. You may simply want to use a CSS alternate stylesheet just to show off your talents as a designer, such as the thousands of versions of the CSS Zen Garden website.

If you're going to add an alternate to the CSS stylesheet that comes with your site, there are three words to keep in mind, as described on the wonderfully informative design blog AListApart:

Persistent: These styles are the ones that you want on your site no matter what. It may be logo images, or watermarks and copyright information, or even a particular font that you like. Often margins and other layout elements are kept consistent by the addition of "persistent" styles. The code for a "persistent" stylesheet is dead simple: it's the default one for any CSS stylesheet link:

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

Preferred: The preferred stylesheet is your top choice, as the name implies. Unless some outside factor such as the platform, browser type, or viewer choice changes the CSS, this is the one that is used by the browser.

The code to designate "preferred" is not quite intuitive. It is the same as usual, with the addition of the "title" attribute:

<link rel="stylesheet"type="text/css" href="preferred.css"title="MyPrefSheet" />

Notice that the word "preferred" is only included in the name of the sheet - it's not part of the code. By designating the "link rel" as "stylesheet", this becomes the preferred code, and by giving it a "title" you are allowing the browser to tell it apart from the other stylesheet choices you are about to add.

Alternate: You can add as many alternate stylesheets as you like. To designate one, the code changes slightly:

<link rel="alternate stylesheet"type="text/css" href="alternate01.css"title="FirstAltSheet" />

In fact, you don't even have to create them as completely separate sheets. Any particular style can be given the same "title" tag and end up grouped together when the stylesheet changes. The one thing that will need to be accurate is the "href", which may lead to a file in the same directory (as shown in these examples) but could actually link to any other stylesheet anywhere on the web.

Choosing a CSS Alternate Stylesheet

If you want your viewer to be able to change a stylesheet at any time, things get a bit more complicated. The browser needs to check all the links on the page to see which ones link to CSS, then which CSS the page is currently showing, and finally let the viewer choose to implement a different set of styles and display them. Sometimes that involves downloading (or pre-loading) more images or content, and in general requires a fair amount of javascript.

A List Apart has a very thorough tutorial on making this work for free. You can also find out a great deal about using a CSS alternate stylesheet on the World Wide Web Consortium site. That site also contains fourteen different stylesheets itself. Using these resources you'll be able to add the power of style choice to your own site in no time at all.

CSS Alternate Stylesheet