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.
You will need to have some knowledge of CSS to understand this article. You don't have to be a guru or anything like that, but a little knowledge is needed otherwise you may be completely lost.
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:
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.
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:
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:
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:
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 | Style
View | Page 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 (ie, menu). In particular, Internet Explorer 7 and below do not support it. And when I last checked Safari in 2008, it didn't have the ability to switch style sheets from its menu either.
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 inserted in this page so that you can see how it works.)
The next chapter, on using JavaScript to change the style sheet dynamically, will provide a way to deal with these shortcomings.
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-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
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 https://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 or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Allow Your Visitors to Switch Between Alternate CSS Styles / Themes
