Css Skinning: Let Your Visitors Choose the Style

by Jamie Eastabrook

Skinning is a concept where by a program user or website visitor is given control of how the program or website they are using, looks to them, by choosing from a selection of differing pre-made designs (or skins.)

From the user point of view they are able to tailor the way a program or website appears to them according to their tastes and makes for a very interactive experience.

So how does skinning work?

Well if we leave programs to one side and concentrate on websites, the very basic concept is that as a web designer you create however many HTML pages of content (text and editorial images) are needed for your site and then instead of just one CSS file that governs every style and design/positioning element of the site, you create any number of separate CSS (Cascading Style Sheet) files which will style the HTML page a different way depending on which one is loaded.

When the user chooses from a selection of skins on your site one CSS file is swapped for another and the page appears to have been instantly redesigned. (the actual content remains the same, but the way it is presented (colours, fonts, structural images) can be swapped each time a new skin is selected (CSS file is loaded.)

It is important that the mark up of your site is (i) valid and (ii)easy to reference via your style sheet.

One of the most famous examples of this concept is the site CSS Zen Garden: http://www.csszengarden.com/ 

The mark up is identical but the changes to the CSS allows for complete reskinning of the front end.

Useful Links:

Cascading Styles Sheet at W3.org (World Wide Web Consortium) https://www.w3.org/Style/CSS/Overview.en.html

CSS Zen Garden http://www.csszengarden.com/