For one of my assignments I have to make 2 different CSS style sheets and I have done that. Now in the assignment it says that if I want to I can link the two style sheets to just one html page, so I'm guessing that there will be two options to switch between the two styles. My question: How do I achieve this? I heard that there is some java involved, and would I need to create buttons as well or a drop down menu so the options can be shown?

Here is an example if you don't understand what I am trying to say: /. At the bottom you have an option to change the theme, but I wouldn't mind just having two buttons.

Thanks in advance.

For one of my assignments I have to make 2 different CSS style sheets and I have done that. Now in the assignment it says that if I want to I can link the two style sheets to just one html page, so I'm guessing that there will be two options to switch between the two styles. My question: How do I achieve this? I heard that there is some java involved, and would I need to create buttons as well or a drop down menu so the options can be shown?

Here is an example if you don't understand what I am trying to say: http://adactio./. At the bottom you have an option to change the theme, but I wouldn't mind just having two buttons.

Thanks in advance.

• javascript
• html
• css
• dreamweaver

Share Improve this question Follow edited Jan 29, 2013 at 15:14 antony.trupe 10.9k1010 gold badges5959 silver badges8484 bronze badges asked Jan 5, 2010 at 20:07 user228390user228390 4911 gold badge44 silver badges99 bronze badges 4

• 4 This is homework, do it yourself. Hint: Look at the source of the webpage you linked to. – Hogan Commented Jan 5, 2010 at 20:11
• Google is your friend. One example: javascript change stylesheet – Felix Kling Commented Jan 5, 2010 at 20:14
• I have looked in Google, but I guess I have not been using the right words. Plus I don't get nay marks for this, its just a personal thing that I want to do myself – user228390 Commented Jan 5, 2010 at 20:20
• meta.stackexchange./questions/147100/… – antony.trupe Commented Jan 29, 2013 at 15:14

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Your example don't change page style without request to server, so it's not what you might want. I think that your professor asked about 'alternate' stylesheet, which can be chosen from web browser.

<link rel="stylesheet" type="text/css" href="std.css" title="standard skin" />
<link rel="alternate stylesheet" type="text/css" href="alt.css" title="alternate skin" />

With this code in your heade of document, you can chose which stylesheet to use for styling and it can be changed without php, cgi or other server-side technology.

http://www.w3/Style/Examples/007/alternatives for more informations.

Note:

When a document is initially loaded, the persistent and preferred style sheets are applied to the document. The alternate style sheets can then be selected by the user. The W3C tells us that the browser should give us a choice of the style sheet we want to use, and suggests that perhaps a drop–down menu or tool bar will be provided.

(from http://www.alistapart./articles/alternate/)

Try looking up 'style sheet switcher' in Google.

Did they teach this to you in class? I assume this technique would be in your textbook; the professor wouldn't just expect you to have knowledge from thin air...

The site you showed is passing a variable through the URL. Then based on what the URL says, it determines which style sheet is loaded.

"http://adactio./?skin=hi-tech"

You create the variable. Then you would pass it through a link. Something like:

<a href="?skin=hi-tech">Hi Tech Skin</a>

Then to determine which stylesheet is loaded you would do something like:

<?php if(skin == 'hi-tech'){ ?>

<link rel="stylesheet" href="#" type="text/css" media="screen" />

<?php }else if( ...and so on...

Its as simple as using javascript on page load to add a "link" element to the correct style sheet based on the query string of the page. If you don't have a query string (which would be the case on the first visit to the page), then have a default one added via java script (or already in the page and javascript edits the current one).

"so I'm guessing that there will be two options to switch between the two styles"

I think this guess is wrong. Its not unusual to link to multiple CSS files from one page, using them both at the same time. Its better to use fewer files, but its not unusual to have more than one.