It is possible to have more than one external stylesheet. You just have more than one LINK element pointing to more than one stylesheet:
Create three stylesheets. Call the first one styles1.css:
body {
color:white;
background-color:black;
}
The second one is styles2.css:
body {
background-color:blue;
}
Then styles3.css
body {
color:yellow;
}
Create a Web page with a single paragraph of text and put three LINK elements in the HEAD section:
<link rel="stylesheet" type="text/css" href="styles1.css"/>
<link rel="stylesheet" type="text/css" href="styles2.css" />
<link rel="stylesheet" type="text/css" href="styles3.css" />
Try the page. The second stylesheet should override the first and make the background blue. The third should override the first and make the fore colour yellow. Most browsers do this properly.
Persistant, preferred and alternate stylesheets
The three stylesheets above are known as persistent stylesheets (they are always applied to the page). Preferred stylesheets are only applied one at a time (there can be only one active preferred stylesheet). Alternate stylesheets are alternatives to the preferred stylesheet. In HTML and CSS once the page is loaded it will not change in any major way and so the selection of preferred or alternate stylesheets will normally be done by the user (probably through JavaScript but also through some browser menus).
To set a preferred stylesheet you give the LINK element a TITLE attribute. There should only ever be one preferred stylesheet so the others should be given the REL attribute of alternate stylesheets:
<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" />
<link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" />
<link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" />
Try this. The first stylesheet should be applied but the other two are ignored. They are there ready for use by JavaScript or another scripting language but have no effect until then. Unfortunately, Chrome and Safari (using webkit) act differently to other browsers. Internet Explorer, Opera and Firefox all register the presence of the alternate stylesheets but ignore them for now. Webkit browsers pretend that the stylesheets do not even exist. That is not a problem until JavaScript is used to change the active stylesheet but bear in mind that using TITLE attributes in Webkit browsers will effectively hide all but the first stylesheet from the browser. In some other browsers you can use the browser itself to change the active stylesheet. Open your three-style page in Opera or Firefox and use the menu to select the stylesheet:
- Opera - Menu - Page - Style
- Firefox - View - Page style
This manually selects the preferred stylesheets from the alternates.
