Alternate Stylesheet Example

Viewing Alternate Stylesheets

This is a demonstration of alternate stylesheets. To select an alternate stylesheet, view this page with Firefox or Netscape or any other Mozilla Gecko-based browser or Amaya or ... just about anything except Internet Explorer or Lynx or Mosaic.

Creating an Alternate Stylesheet

An alternate stylesheet is just an external stylesheet with a special link element in the document that uses it. The link element must specify a title to be presented to the visitor as a selection in the menu of the browser, and the link must also specify that the stylesheet is an external stylesheet.

The source of the document must have link elementsfor each alternate choice of style in the head element, like this example:

<head>
<title>Demo</title>
<link title="Rose" rel="alternate stylesheet" href="rose.css" type="text/css" />
<link title="Gold" rel="alternate stylesheet" href="gold.css" type="text/css" />
</head>

Note that the items in bold are what make the stylesheet an alternate one. 

Using Alternate Stylesheets With KompoZer

  With KompoZer, select Tools→CSS Editor→Link elt.(The Advanced mode must be on to do this, and you need to click the button that looks like a down-arrow attached to the pallette to get to the Link Elt. option. See the illustration below)

Screen showing Link elt. option on the menuFill in the dialog, checking the Alternate box, entering the filename in the URL box, and entering a descriptive title in the Title box, and it is important that you select the Create Stylesheet button to confirm before you close the dialog box.
The New Linked Stylesheet dialog box