Two columns Three columns Mixed cols and rows Gallery Archives Clean & Clear Dark or Black High Contrast/ Impact Blog Designs New Corporate/ Professional Unconventional Designs Liquid layouts Web Design Firms Our Favorites What's Popular Last 20 submissions
Horizontal Menus Vertical Menus Multiple/ Nested Levels

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 (17)

I like it!

#1: 飞机票 on 07/27 at 12:59 AM

Clear codes and clean look.Thx for it..

ad.comc4i.com

#2: hayek on 09/15 at 02: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/26 at 12:10 AM

cool,useful, really thanks

#4: Jose on 10/12 at 11: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/13 at 01:25 AM

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 01:06 PM

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

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

Post a Comment: Guest (Login or Register)

Name: (Required)

Email: (Required)

(NOT shown on page)

URL:

(Shown on page if entered)

Comments: (Required)

Remember my personal information
Notify me of follow-up comments?

Submit the word you see below:


CSS Forums

CSS Forums: latest threads Last Post Info
Cant design (1) 05/16/2008 12:28 pm
By: tarik
How to show an entire pdf in one div (2) 05/14/2008 11:07 am
By: Grundic
Starting A Web Design Business - How Do I Attract Customers? (10) 05/13/2008 02:37 pm
By: april
Download.. Pacific Wings multicolor menu (1) 05/13/2008 03:05 am
By: sebreh
Check out this website I am working on CRITIQUE. (5) 05/13/2008 01:20 am
By: abran