Languages

Web Style Sheets CSS tips & tricks

See also the index of all tips.

Alternative style sheets

A document doesn't need to have a single style sheet. You can give it a default style and any number of alternatives for the reader to choose from. This page, for example, has as alternatives all the W3C Core Styles, plus two style sheets found elsewhere on the Web (author: David Baron).

How the reader can select the alternatives depends on the browser. Not all browsers yet offer a menu for it, but many do. E.g., in Opera, Internet Explorer and Firefox you can find the styles under the “View” menu. As of 2012, Chrome requires an extension (e.g., Decklin Foster's Style Chooser).

To include extra style sheets, it suffices to add more <LINK> elements in the header, with the right REL and TITLE attributes, as follows. (I left out some of the styles; see the source of this document for even more links.) 

<link rel="stylesheet"
 title="Gold (right, fixed) + navbar"
 href="../threepart-f.css">

<link rel="alternate stylesheet"
 title="Oldstyle"
 href="http://www.w3.org/StyleSheets/Core/Oldstyle">

<link rel="alternate stylesheet"
 title="Modernist"
 href="http://www.w3.org/StyleSheets/Core/Modernist">
...
<link rel="alternate stylesheet"
 title="Steely"
 href="http://www.w3.org/StyleSheets/Core/Steely">

<link rel="alternate stylesheet"
 title="Forest (by David Baron)"
 href="http://dbaron.org/style/forest">

<link rel="alternate stylesheet"
 title="Plain (by David Baron)"
 href="http://dbaron.org/style/plain">

Groups of links with the same TITLE are automatically combined into one style sheet.

Bert Bos, style activity lead
Copyright © 1994–2021 W3C® Privacy policy

Created 17 January 2001;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC

Languages

About the translations