Integrating Alternative Stylesheets in WordPress Themes
I am sure that everyone has come across WordPress themes which use alternative stylesheets (CSS) to switch between different sets of style information. For example, you can have a look at the following themes that have this functionality :-
Here is how these themes do it :-
Default Stylesheet
Ideally, every WordPress theme has a style.css file associated with it that contains all the style information for the theme. This default stylesheet is usually called in the header.php file of your WordPress theme by something like this :-
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
Rel=”stylesheet” is what defines the active stylesheet as the default one.
Alternative Stylesheets
Now you will need alternative stylesheets that change the look or the layout of your theme. For example, you can change the color of the background, fonts, positioning of the sidebar, header images etc. To define the alternate stylesheets, you should use something like rel=”alternate stylesheet” during the stylesheet call. Here are some examples :-
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/orange.css" media="screen" title="orange" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/blue.css" media="screen" title="blue" />
You can make new stylesheet files called orange.css and blue.css files and maybe change the background colors for the body of your theme (for this example). Use something like :-
body {background-color:#FF6E1F;}
Goes in orange.css for orange background color
body {background-color:#2C85EF;}
Goes in blue.css for blue background color
Now, place these files in your theme folder (same path as your style.css).
Style Switcher
The styles in the above alternate stylesheets will be included into your theme but will not be used until it is specified in some way. To do this, we can take help of Javascript code which will serve as a style switcher. You can download the Javascript file here :-
Please the styleswitcher.js file into your theme folder and include it into your theme by placing the following code above the tag in your header.php file :-
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/styleswitcher.js"></script>
Now, you need a control scheme that will allow you to switch between the alternative stylesheets. Place the following code anywhere in your theme body :-
The above code will make new hyperlinks in your theme called Orange and Blue. When you click on these links, your theme’s background color will change to the specified color.
Conclusion
So you can now experiment and tweak different things in your theme using the alternate stylesheets. You can make any number of such stylesheets but make sure that you call them through the Javascript code. I hope you benefit from this article 
Thank you for this Jai! It has really helped me a lot.
I liked this implemented in the templates so I have been working on one for my site.
Very interesting article, and something that I’ve been curious to learn about recently!
One question I would have is: how useful has the community here found alternating stylesheets to be? Do your readers prefer them, or are they more of a novelty?
Nice instructional post!
now i know how to change the wp style.
u’re a good tutor, jai. good job
you are ok!
now i think , i can develop my own wp theme,
thanks brother for this css tutorial
??????????
I have been looking for this, since a while but did not know what to search for!
Thanks, I think I have found it:D
I must say that this stylesheet tutorial has helped me a lot in understanding css. Thanks for making this tutorial