How to Allow Your Visitors to Switch Between Alternate CSS Styles / Themes

Add Theme Support to Your Website


How to Allow Your Visitors to Switch Between Alternate CSS Styles / Themes

by Christopher Heng, thesitewizard.com

Cascading Style Sheets provide webmasters a lot of control over their websites' appearance. One of its features is that you can specify different or alternate style sheets for a page. If your visitor prefers a particular design, or theme, that person can simply switch to that theme using their browser. This article describes how you can implement theme support, by giving your users the ability to switch between different styles on your website.

Note that there are two parts to the tutorial. This chapter deals with the Cascading Style Sheets ("CSS") component. It is complete in itself, and with it, you can already implement CSS switching support (or theme support) on your site for most modern browsers. The next chapter provides a dynamic way for the user to permanently set the theme for your site using JavaScript. It also adds support for browsers that do not have built-in support for switching styles.

This article requires you to have some knowledge of CSS. You don't have to be a guru or anything like that, but a little knowledge is needed otherwise you may be completely lost. You can read a brief introduction to CSS at http://www.thesitewizard.com/archive/css.shtml

Uses of Alternate Style Sheets / Themes

There are some reasons why you might choose to supply alternate style sheets for your users.

I'm not claiming that you must have alternate styles for your site because of these reasons. For most sites, an alternate CSS is an overkill. However, if you have established a community where users with very different demographics repeatedly return to your site, having alternative styles that appeal to different people may make your site more user-friendly.

Alternate CSS How-To

On most sites, web designers typically include a style sheet for their site using a link command like the following:

<link rel="stylesheet" type="text/css" href="http://example.com/css/style.css">

If you want to provide alternate style sheets for your site, you will need to give each style sheet a title, so that the browser will know that you are providing alternatives for your site. For example, if you want to provide two themes for your site, one called "blue" and the other "pink", you can specify them as follows, instead of the above example.

<link rel="stylesheet" type="text/css" href="http://example.com/css/blue.css" title="blue">
<link rel="alternate stylesheet" type="text/css" href="http://example.com/css/pink.css" title="pink">

Notice that the default style sheet that will be used is "blue". This is the preferred style sheet, and it is indicated by specifying a "rel" attribute of "stylesheet". The "pink" stylesheet is an alternate style that the user can choose. As you can see, it has a "rel" attribute of "alternate stylesheet". Another way of specifying that a particular style sheet is to be the default is to create a meta tag like the following:

<meta http-equiv="Default-Style" content="blue">

If you specify both the "alternate stylesheet" attribute value as well as the meta tag, the latter takes precedence. I suggest that you be consistent and stick to either one or the other method on all your pages. It'll make debugging and modifications easier, and reduce careless mistakes in the future.

Persistent Styles

Sometimes you may want a particular style sheet to be applied no matter which theme the user selects. Put all those common styles into a separate file, and include it without a title tag like this:

<link rel="stylesheet" type="text/css" href="http://example.com/css/common.css">

When no title tag is specified, the browser will always load that stylesheet. Such a style sheet is regarded as "persistent".

In other words, if a persistent style sheet is added to the example site above, the HEAD section will have the following declarations:

<link rel="stylesheet" type="text/css" href="http://example.com/css/common.css">
<link rel="stylesheet" type="text/css" href="http://example.com/css/blue.css" title="blue">
<link rel="alternate stylesheet" type="text/css" href="http://example.com/css/pink.css" title="pink">

The common.css style sheet will always be loaded. The default style sheet that will be used is the "blue" one. If the browser supports style switching, the visitor will be able to switch to the "pink" style as well.

Groups of Style Sheets

It is still possible to separate styles for different aspects of your web page into different files. For example, if you like to put your menu styles in a separate file from your layout styles, you can do it this way:

<link rel="stylesheet" type="text/css" href="http://example.com/css/blue-menu.css" title="blue">
<link rel="stylesheet" type="text/css" href="http://example.com/css/blue-layout.css" title="blue">
<link rel="alternate stylesheet" type="text/css" href="http://example.com/css/pink-menu.css" title="pink">
<link rel="alternate stylesheet" type="text/css" href="http://example.com/css/pink-layout.css" title="pink">

The browser will see all the stylesheets with a common title as one set of styles to be applied together.

How to Switch Alternate Style Sheets / Themes

Most modern browsers provide a way for your users to change style sheets for your site on-the-fly. For ease of reference, when I say below "View | Page Style", it means to click the "View" menu, then the "Page Style" item on the menu that appears. A list of style sheets that you can switch to will then appear.

For your convenience, I have provided an alternative to the default style for this page, so if you have one of the above browsers, you can try out the above commands to switch between my two style sheets. The alternate style sheet is merely the old style sheet for thesitewizard.com, which, at this time, is being phased out.

Observe the following deficiencies in the built-in browser support for alternate style sheets:

The next chapter, on using JavaScript to change the style sheet dynamically, will provide a way to deal with these shortcomings.

Conclusion

Alternate style sheets allow you to add a sort of theme support for your website. This chapter deals with the CSS component of adding themes to your site. In the next chapter, I will discuss how you can use JavaScript so that the themes can be "sticky". That is, once the user selects a theme for your site, he/she will be able to view your whole site using that particular theme. The JavaScript will also add support for browsers that don't have built-in style switching.

Copyright © 2008-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Allow Your Visitors to Switch Between Alternate CSS Styles / Themes





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.