This is an old revision of the document!
| Type of stylesheet | Relationship | Title | Notes |
|---|---|---|---|
| Persistent | stylesheet | Not set | Always active |
| Preferred | stylesheet | Set | Active on initial page load |
| Alternate | alternate stylesheet | Set |
Preferred and alternate stylesheets can be grouped together (if you need more than one stylesheet to create a given theme, for example). They are grouped together by having a common “title” attribute; grouped stylesheets will be enabled/disabled together.
While it is permitted by the DTD to have more than one set of preferred stylesheets, it's best practice to have one set (which implements your site's default theme) and then provide any other sets as alternate stylesheets. I've included an example below of where you would put a second (and subsequent) set of preferred stylesheets, but (as noted below in comments) I'd recommend that you not do so.
When the page initially loads, any persistent stylesheets and the first of any preferred stylesheets are applied. The user can then switch to other stylesheets; when this choice is made, any persistent stylesheets will remain “enabled” and all other preferred and alternate stylesheets will be “disabled”.
<!DOCTYPE html> <html lang="en_us"> <head> <title>CSS Relationship Test</title> <!-- PERSISTENT STYLESHEETS --> <link rel='stylesheet' type="text/css" media="screen" href="base1.css" /> <link rel='stylesheet' type="text/css" media="screen" href="base2.css" /> <!-- PREFERRED STYLESHEETS --> <link rel='stylesheet' type="text/css" media="screen" href="preferred1-1.css" title='Preferred Theme #1' /> <link rel='stylesheet' type="text/css" media="screen" href="preferred1-2.css" title='Preferred Theme #1' /> <!-- You should avoid doing this, use "alternate stylesheet" instead --> <link rel='stylesheet' type="text/css" media="screen" href="preferred2-1.css" title='Preferred Theme #2' /> <link rel='stylesheet' type="text/css" media="screen" href="preferred2-1.css" title='Preferred Theme #2' /> <!-- ALTERNATE STYLESHEETS --> <link rel='alternate stylesheet' type="text/css" media="screen" href="alternate1-1.css" title='Alternate Theme #1' /> <link rel='alternate stylesheet' type="text/css" media="screen" href="alternate1-2.css" title='Alternate Theme #1' /> <link rel='alternate stylesheet' type="text/css" media="screen" href="alternate2-1.css" title='Alternate Theme #2' /> <link rel='alternate stylesheet' type="text/css" media="screen" href="alternate2-2.css" title='Alternate Theme #2' /> <link rel='alternate stylesheet' type="text/css" media="screen" href="alternate2-3.css" title='Alternate Theme #2' /> <link rel='alternate stylesheet' type="text/css" media="screen" href="alternate2-4.css" title='Alternate Theme #2' /> <link rel='alternate stylesheet' type="text/css" media="screen" href="alternate3-1.css" title='Alternate Theme #3' /> <link rel='alternate stylesheet' type="text/css" media="screen" href="alternate3-2.css" title='Alternate Theme #3' /> </head> <body> </body> </html>