CSS - Alternate Stylesheets

Main stylesheet:

<link href='/css/main.css' rel='stylesheet' type='text/css' title='main' media='screen'>

Alternate stylesheet:

<link href='/css/alt1.css' rel='alternate stylesheet' type='text/css' title='alt1' media='screen'>

Persistent stylesheets are always enabled (they are always on) and are combined with the active stylesheet. They can be used for shared rules that are common to every stylesheet. To make a stylesheet persistent, the rel attribute is set to 'stylesheet' and no title attribute is set.

Preferred styelsheets are enabled by default (they are on when the page is loaded). They can be disabled if the user select an alternate stylesheet. To make a stylesheet preferred, the rel attribute is set to 'stylesheet' and the style sheet is named with the title attribute. Several preferred style sheets can be grouped together by giving them identical title attribute. These grouped stylesheets are then all enabled or disabled together. If more than one group of preferred style sheet are declared, the first group take precedence.

We can store the name/title of the selected style sheet in a cookie, and some javascript, to make the effect of selecting a stylesheet persist across pages.


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License