Using multiple CSS sheets

  Mr A! 15:52 27 Jul 2004

I have created my website at click here with each page linking to a css sheet "style" in the home directory.

Is it possible to be able to use two different style sheets on a page for example style.css as the default and style2.css for people with dissabilities (making the text larger and darker)?

Can it be done and if so how?

  Forum Editor 23:54 27 Jul 2004

The answer's yes,
but what you'll need is a way to switch between the style sheets. You can associate your style sheets with documents by using a list of link elements in the head. A style sheet can have one of three different relationships with the document: Persistent, Preferred, and Alternate.
Persistent style sheets are always enabled (always “on”).They're combined with the active style sheet, and can be used for shared rules common to every style sheet. To make a style sheet persistent, the rel attribute is set to “stylesheet” and no title attribute is set. If you wanted to make a sheet called 'mra' persistent, you would include the following link element in the head:-

<link rel="stylesheet"

type="text/css" href="mra.css" />

Preferred stylesheets are 'on' by default when the page is loaded, but they can be disabled if the user selects an alternate sheet. To make a style sheet preferred, the rel attribute is set to “stylesheet” and the style sheet is named with the title attribute. To make mra.css preferred, a title attribute is added, giving the default style a name:-

<link rel="stylesheet"


title="whatever" />

Alternate style sheets can be selected by your visitor as alternatives to the preferred style sheet. This allows the visitor to personalise a site and choose his/her favorite scheme. They can also be used by people with accessibility problems. To specify an alternate style sheet, the rel attribute is set to “alternate stylesheet” and the style sheet is named with a title attribute. To make mra.css into an alternate style sheet, the keyword “alternate” is added to the rel attribute.

<link rel="alternate stylesheet"

type="text/css" href="mra.css"

title="whatever" />

Does that help?

If it does, it's only half the battle. If your visitor uses a Mozilla browser all this will work perfectly - the visitor can access the sheets via the 'View' option on the menu bar. Try that in Internet Explorer and you'll get nowhere. For IE usewrs to be able to choose stylesheets you'll need some Java script, and here is what the change function looks like:

function setActiveStyleSheet(title) {

var i, a, main;

for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {

if(a.getAttribute("rel").indexOf("style") != -1

&& a.getAttribute("title")) {

a.disabled = true;

if(a.getAttribute("title") == title) a.disabled = false;




Good luck!

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

AMD Radeon Adrenalin release date, new features, compatible graphics cards

Artist Pete Oswald on creating relatable characters & his new book

New iMac Pro release date, UK price & specs rumours

Idées cadeaux pour geeks et tech addicts