Recipe 1.13. Setting up an Alternate Style Sheet

Problem

You want to provide other style options for users who may want larger text or a different color scheme.

Solution

Use the link element with a title and link it to the alternate style sheets. The title lets the user see what options are available when viewing the list of available styles. In Firefox, click ViewPage Styles to see the list.

<link href="default.css" rel="stylesheet" title="default styles"  type="text/css" media="screen" /> <link href="green.css" rel="stylesheet" title="green style"  type="text/css" media="screen" /> <link href="blue.css" rel="stylesheet" title="blue style"  type="text/css" media="screen" />

Unfortunately, this solution doesn't work in Internet Explorer 6.0 or Safari.

Discussion

Alternate style sheets work similarly to the media type style sheets in Recipe 1.7. Instead of creating styles for media, you're providing users with multiple choices of styles for the screen. Furthermore, this technique doesn't require using JavaScript. Some users have disabled JavaScript, which would affect a style sheet switcher.

All you have to do is make a copy of your default style sheet and rename it. Make the changes to the style sheet and add the link element with a title (see Figure 1-34).

Figure 1-34. Switching style sheets within the browser options

See Also

The article "Invasion of the Body Switchers" by Andy Clarke and James Edwards shows how to create a JavaScript style switcher at http://www.alistapart.com/articles/bodyswitchers; and Amit Ghaste's CSS Style Switcher tutorial at http://ghaste.com/pubs/styleswitcher.html.