[Home]Multiple style sheets

HomePage | RecentChanges | Preferences | Newbie Help

Category CSS FAQ

The simple approach is documented in the HTML4 specification, [Preferred and alternate stylesheet].

(Actually, the HTML4 style mechanism is difficult to grasp in full, but a full understanding is not necessary for practical use.)

Briefly, an author links to two style sheets:

 <LINK type="text/css" title="pink" rel="stylesheet" href="pink.css">
 <LINK type="text/css" title="blue" rel="alternate stylesheet" href="blue.css">

The first style sheet, named 'pink', is the preferred style sheet. The second style sheet, named 'blue', is an alternate stylesheet. The user agent (such as a browser) should then allow the user to select which style sheet to apply.

Unfortunately, this simple funcionality is not implemented in many browsers today; the only one I know to support it is [iCab] (which runs only on Mac operating systems). Mozilla 1.0, once it's released, is supposed to support it as well.

A more involved approach that works for users of widespread but defective browsers (read: Internet Explorer) that the author do some programming and that the user enable cookies. One example is the article Alternative Style at http://www.alistapart.com/stories/alternate/

On a front page, a Web site offers a choice of styles (with examples either in the front page or linked). The user selects a style and the choice is recorded in a cookie. (This is possible in several ways. A smart implementation would use client-side scripting and have the server ready to set the cookie as backup.)

Another Wikizen suggested storing the URL of the chosen style sheet in a cookie. The Wikizen seemed to suggest modifying HTML documents, based on the cookie, before sending to the user. This approach, sadly, breaks cache schemes.

A better approach leaves untouched the HTML documents and style sheets. In the better approach, an HTML document has a lone style sheet link, which points to a redirector. The redirector inspects cookie settings and returns a non-cacheable redirection to a cacheable style sheet. A robust redirector redirects requests without cookies or with malformed cookies to a basic style sheet.

How do I have one Stylesheet for printing, and one for browser viewing?

A common thing on news sites and high content sites is to offer a "printer friendly" version of the page you are looking at. This usually doesn't have any graphics or animations, just text, making it easy to print. If you went down this road it would be very easy to have a different stylesheet for printing, as the one for browser viewing.

And you wouldn't have to do much extra work either, especially if you use external stylesheets. Just create, say a "print" subdirectory, copy all your pages over to it, and then go through, changing the name of the CSS link.

Mark Gallagher: Not even that. Create two stylesheets, then (assuming you use the @import method):

  <style type="text/css" media="screen">
        @import "main.css";
  <style type="text/css" media="print">
        @import "print.css";

To my knowledge it works in Mozilla 0.9.3 and up (which means it also works in Netscape 6.1), Internet Explorer 5 and 6, and also from Opera 5 and up. Another way to use this is the following:

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

Viewing the source of sites that use this, such as the excellent design webzine [A List Apart] is a good idea.

Comments --
HomePage | RecentChanges | Preferences | Newbie Help
This page is read-only | View other revisions
Last edited March 31, 2003 12:15 pm (diff)

This FAQ is happily hosted by Betadome Digital Media