Classes on the body tag | Comments (5)
Posted in CSS on 16th June 2005, 12:26 am by Stuart
In Doug Bowman’s second @media presentation he mentioned utilising classes on the body element to be able to affect the layout of the entire page. This simple technique uses descendant selectors in such a way that an entire page layout can be altered by adding or changing a class applied to the body tag.
For example visualise the following (simplified) stylesheet
#maincontent {
float : left
}
#secondarycontent {
float : right
}
.home #maincontent {
float : right
}
.home #secondarycontent {
float : left
}Assuming maincontent and secondarycontent are two divs, by adding the class ‘home’ to the body tag (<body class=”home”>), the two columns could be reversed. When you think about it, this method can be used to radically change the entire site layout with only one change to the markup and without requiring extra stylesheets. It’s this exact method used to alter the look of each of the sections on Doug’s site http://www.stopdesign.com
That’s pretty interesting. I might have a play around with this idea at the weekend.
I would hasten to add, this method really comes into it’s own when you utilise semantic naming techniques (use #secondaryContent instead of #rightColumn)…
Swapping core elements around becomes really easy. For instance, if you want subnavigation on the right hand side on one page but on the left hand side in another.
Like I said: Ace!
You really need to sort out your carriage return replacement in the comments, Stupot. It really gets on my wabs!
Yep I’d been meaning to get round to that.
Linebreaks are now automagic!
[...] I won’t claim any of this is ingenious or even original (to me—thanks, Andy) as many, many others have posted on this very topic (see Classes on the body tag and/or Dynamic ID for the <body> for just a couple examples). [...]