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.
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
There are some reasons why you might choose to supply alternate style sheets for your users.
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.
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.
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.
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.
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.
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.
View | Page Style
View | Style
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, 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.)
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.
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.
It will appear on your page as: