Is this CSS Body ID thing new?
This is not a new technique, and in fact in the company where I used to work, everyone is doing this. I guess it was also due to the great in that company that cascade the knowledge down to the every other employee, but as I randomly asked other people who make tableless CSS websites, do you use body ids? And explain how they are used like programming control structures like if..then conditional statements. Many of them still say no.
What is this for?
Making CSS driven websites is very ideal with all the advantages you have probably read about already, and one of these advantages is for doing global changes to a number of pages by simply changing the stylesheet. Which makes this type of website building ideal for mobile devices as well if done correctly, changing the appearance of a website for another type of screen will simply mean changing the stylesheet.
Many parts of pages look the same, that it is like using a template with a template of styles but of course, not all pages are the same. There are still parts that are not the same of course. And this is where this technique comes in, you have general rules for many parts of the page, and you have exceptions to the rules on some parts like in graphic titles of a page, changing mastheads, selected current buttons on spritenavs, removing parts for some pages.
How to do it
Let me explain by example, but before I do, let me just show the concept first. In your stylesheet, you are going to have something like this:
#general-rule{
…
}
And for instance, you have these pages: index.html, about.html and contact.html, they will then have these body tags respectively in their individual files:
<body id=”index”>, <body id=”about”> and <body id=”contact”>
Now to make exceptions to the rule of the general rule, you do something like this to your stylesheet:
#general-rule{
…
}body#index #general-rule{
…
}
body#about #general-rule{
…
}
body#contact #general-rule{
…
}
In a way, they seem to act like programming control structures, like a nested if…then, or even like a switch…case if you wish to look at it that way. The styles that are in body#index will only apply to the index.html since it has the body tag id index and will not be used on other pages.
I can’t picture it, show me a working example
Here is one of our latest websites, a website for Pillows and Designs by Melody. If you check the CSS file, you find this part:
#container-top{
width:778px;
padding:0px;
margin:0px;
}body#index #container-top{
background:url(../images/container-top-index.jpg) top no-repeat;}
body#about #container-top{
background:url(../images/container-top-about.jpg) top no-repeat;}
body#contact #container-top{
background:url(../images/container-top-contact.jpg) top no-repeat;}
body#products #container-top{
background:url(../images/container-top-products.jpg) top no-repeat;}
body#cart #container-top{
background:url(../images/container-top-cart.jpg) top no-repeat;}
Obviously, this is changing the image of #container-top for the various pages. All other properties of container top are set in the initial properties and only the image changes of every page. And take a look at the images so you get an idea of what is changing.
Why do it this way?
I will not go over the CSS advantages, and if you are reading this article, I assume you use CSS tableless builds already since you have already seen the light in CSS. Now why do it this way, using body IDs? And my answer is, why not? If you use plain div tags and image replacement, you will need to create IDs for each one. And often set the height and width for each one. If the website suddenly adds a new page, you create a new div inside with the right ID. Making a global change to these will also be easier doing it this way.
Leave a Reply