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

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.

• To Support Varying Tastes

  Different designs appeal to different people. For example, some people like a colourful layout. Others prefer a plain "clean" design. By providing alternate style sheets, you can cater to all users.

• To Provide for Special Needs

  If your site has users with special needs, for example, older people who may need larger font sizes, alternate style sheets provide a way where you can have a large-font theme alongside a normal-sized default without having to create two versions of the same page.

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" title="blue"
	href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
	href="http://example.com/css/pink.css">

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:

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" title="blue"
	href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
	href="http://example.com/css/pink.css">

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

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.

• Firefox

  View | Page Style

• Opera

  View | Style

• Konqueror

  View | Use StyleSheet

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 is, at this time, is being phased out.

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

• Not all browsers support theme switching from their user interface. In particular, IE 7 and Safari do not support it.

• The selections are not "sticky". When you go to another page on the same site, you will have to re-select the theme again. (Note: don't bother trying to select an alternate theme on the other pages of thesitewizard.com. The alternate theme is only included for this page, so that you can see how it works.)

The next chapter 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 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/.

If you find this article useful, please consider making a donation.

thesitewizard™ News Feed (RSS Site Feed) 

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

• How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers)
• How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking)
• General Principles for Designing a New Theme or Template for Your Blog
• How to Centre a Table Using CSS in Nvu and KompoZer
• 6 Things to Note Before Changing Your Site Design
• The Fine Print in Web Hosting: Resource Usage Limits
• Which Web Host Do You Recommend? (FAQ)
• Important Precautions to Take When Buying a Domain Name

New Pages

• How to Add the Copyright Symbol to Your Web Page
• How to Create and Use Cookies in PHP
• How to Insert Google AdSense Advertisements into Your Blogger Blog
• How to Design a Two Column Layout for Your Website Using CSS
• Is It Legal to Use Any Piece of Music, Image, or Article for my Website? And Other Questions on Copyright Relevant to Webmasters
• Why Do the Pictures on My Web Page Not Show Up in Nvu / KompoZer? Troubleshooting the Broken Images on Your Page.
• Should I Use a Temporary Domain Name Till My Preferred Domain Becomes Available?
• Should You Use Cloaked Domain Redirection to Point to Your Website?
• Why Is My Site Not Ranking in the Search Engines?
• What Sort of Website Should I Create In Order to Earn Money?

Popular Pages

• How to Start / Create Your Own Website: The Beginner's A-Z Guide
• Tips on Choosing a Good Domain Name
• How to Create a Search Engine Friendly Website
• Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3
• How to Design and Publish Your Website with Nvu (free WYSIWYG web editor)

How to Link to This Page

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as:

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