Using More then one CSS style sheets in one html file

Question

Hey guys, 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.com/. At the bottom you have an option to change the theme, but I wouldn't mind just having two buttons.

Thanks in advance.

Answer 1

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...

Answer 2

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.com/?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...

Answer 3

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.org/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.com/articles/alternate/)

Answer 4

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).

Answer 5

"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.