SpotGnome.com - Give Your Body An ID For Better Css Use

Thursday, December 20, 2007

Let’s say you want to change the color of your links on just your contact page to red. They are blue on every other page, but it just makes sense for them to be red on your contact page (for some reason). There are a couple ways you could go about this.

You could declare a separate stylesheet for your contact page.
This isn’t ideal, because it’s redundant. If you make any other changes, you’ll always have to make them both on the main stylesheet and the contact page stylesheet.
You could give all those links a unique class on that page.
This isn’t ideal, because it isn’t very semantic and it’s also redundant. Why apply a class to every single link on the page when they really aren’t any different from links elsewhere on the site, contextually speaking?
The best solution is to give your the body a unique ID.
This solves the problem perfectly. You can use the same stylesheet and target just the links you want to with a single CSS selector.

Simple, literally just apply the ID to the body tag:

   ...
</head>

<body id="contact-page">
   ...

Now for our example of making all links on the contact page red instead of blue, just use some CSS like this:

a {
color: blue;
}

#contact-page a {
   color: red;
}

Thursday, December 20, 2007 6:45:41 PM (Jerusalem Standard Time, UTC+02:00)

Comments [0] - Trackback
CSS | Design | Programming

Comments are closed.