Home

CSS Examples Alternate Style Sheet for document

Date: 11/19/2004 Alternate Style Sheet for document

Author: CSS Drive

You can specify an alternate style sheet for a document in CSS. For browsers that support it (such as Firefox 1.0+), the user is then able to easily toggle between the main style sheet and alternative one via an icon image located typically in the lower left or right of the browser window:

The CSS:

<LINK type="text/css" rel="stylesheet" href="main.css" title="Default Style" />

<LINK type="text/css" rel="alternate stylesheet" href="alternate.css" title="Alternate Style" />

The second style sheet is an alternate one. The key is to set to "rel" attribute to "alternate stylesheet." The "title" attribute is also important, providing a name for the style sheet while also allowing you to group multiple external style sheets together (all those that share the same "title"), to be applied to the document simultaneously.

Comments (21)

I like it!

#1: 飞机票 on 07/26 at 10:59 PM

Clear codes and clean look.Thx for it..

ad.comc4i.com

#2: hayek on 09/15 at 12:42 PM

this is a very handy tool but i does anyone know how you can change it from one style sheet to another by way of a button from within the website and not through the browser? im new to css but can anyone share a link on that? thanks! much appreciated

#3: carlo codamus on 09/25 at 10:10 PM

cool,useful, really thanks

#4: Jose on 10/12 at 09:54 PM

Hi Hayek,

Yes you can change style sheets with a button, it does however require using javascript. Here is a function that should do it for you, I ripped it from the following site:
http://www.alistapart.com/stories/alternate/

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;
}
}
}

Jereme Guenther

#5: Jereme Guenther on 10/12 at 11:25 PM

CSS "Cascading Style Sheets" LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html

#6: sezerr biyam on 05/02 at 11:06 AM

old stone liked code..just a joke, thank you
bbbbb

#7: hayek on 05/05 at 02:33 PM

Great post. I should try on my own.Thanks for posting.
http://vacationrentalhotspots.com/florida/daytona-beach-vacation-rentals.php

#8: Hemant on 06/04 at 02:51 AM

CSS TEXT examples , Properties , Attribute -
http://css-lessons.ucoz.com/css-text-properties.htm

#9: js examples on 06/23 at 12:55 AM

Thank you for the information.Very useful.
http://vacationrentalhotspots.com/florida-keys-vacation-rentals

#10: Lakshmi on 07/10 at 03:18 AM

NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

All images and content copyright © 2004-2012 CSS Drive. Contact Info | Back to Top