The Body Class Switcheroo

Lachlan Hardy

Visual Net Applications

Introduction

The 'Body Class Switcheroo' is a silly name for a clever trick
Numerous sites use it, one of the most notable being Doug Bowman's Stopdesign¹
It involves structuring your CSS so that simply changing the class of your <body> element can alter any element on the page

Another notable exponent is Milan Negovan who wrote an excellent article on Crafting Lightweight Page Templates with CSS²

http://stopdesign.com
http://aspnetresources.com/articles/css_templates.aspx

Using the Cascade

Using a specific class on the <body> of each type of page allows you to create specific styles for that page
It allows the cascade to override the styles for particular elements
An common use is to have a different layout on the home page, ie 3 columns on the home page, with 2 columns elsewhere

Layout as Example

Changing the layout is the easiest way to illustrate the power of this technique, check out the example¹ page
Adding a class of 'swap' will move the sidebar to the left
Adding 'threecol' will spread the sidebar into three columns
Adding 'subswap' will swap the two smaller columns (when in three columns)

http://vna.com.au/information/present/wsg/2004-11-15/example/

Possibilities

Those are just a few simple examples
Obviously this technique can be used to change any styles at all
A prime example is Stopdesign¹ where Bowman uses this technique to change his colours, layout and background images for each section of the site

http://stopdesign.com

Conclusion

The Body Class Switcheroo is a simple technique that allows great flexibility
Try it out
If you have any trouble, let me know: lachlan.hardy@gmail.com