Geek asks and answers

Using 2 stylesheets in my html site

I finished my site and populated a stylesheet, but now I have created a second stylesheet (called other.css). What I'm trying to do is have 2 links on my home page, one with "normal.css" and one with "other.css". So basically I want the user to be able to choose between my 2 styles. Ive duplicated all my source pages and added “2” to their name, I also created other.css and linked to them on these pages. The "2" pages display an alternate layout, but I don’t know how to let the user switch between styles ... any help please?

NB my html will come completely unchanged, I only change the css file.

Dave

+3
source share
3 answers
Good question. The answer will largely depend on the server-side technology you use. For example, using the Google App Engine, which I usually use, simply change the part of the HTML header that is generated to point to another CSS file. But then this is not a static HTML file.

CSS Zen Garden is a specially designed website that illustrates the same HTML file, which is represented by different stylesheets. Maybe you can get some ideas on how to do this from there. You will see again that pages with different styles, even if they have the same HTML source, are not static .html pages.

0
source

W3C , , , .

View → . , ...

0

If you have php on your server, you can change the stylesheet based on the cookie. The following code will work:

if ($_COOKIE['style'] == '1') {
echo '<link rel="stylesheet" href="normal.css" type="text/css" />';
}
elseif ($_COOKIE['style'] == '2') {
echo '<link rel="stylesheet" href="other.css" type="text/css" />';
}
else {
echo '<link rel="stylesheet" href="normal.css" type="text/css" />';
}

Add a link to the page at the bottom of the page: Change Style

The page at changestyle.php has the following:

if ((isset($_COOKIE['style'])) AND ($_COOKIE['style'] == '1')) {
setcookie(style,2) 
}
elseif ((isset($_COOKIE['style'])) AND ($_COOKIE['style'] == '2')) {
setcookie(style,1) 
}
else {
setcookie(style,2) 
}
0
source

More articles:


All Articles