My co-worker Christine points me to this article full of CSS tips. The most powerful tip which I didn’t know before was that you can put an id attribute in the body tag. This opens up a lot of possibilities. You can style pages differently, all from one style sheet. If you are working with templates, you don’t necessarily need a separate template for the front page, instead you can just give the body tag on the front page a certain id, then style the page differently.

10. Body tag ID.

In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements on a page by page basis. This also will cut down the amount templatatization (is that a word?). Not only will you be able to organize your sections you will be able to create multiple CSS presentations with out changing your markup from template to template or page to page.

For example if a 3 column layout requires being reordered from page to page. Such as columns switching places. This is easily achievable with the power of specificity and the CSS cascade. Simply adding an ID to the body will allow you to change anything inside and outside the document flow. This is increasingly useful when dealing with pages in CMS systems such as Wordpress.

There are a lot of possible uses for this trick. Often within your main navigation you’ll have a link to your home page, and you’ll want that link to disappear when the user is on the home page. This can be difficult if your navigation is in a file that is being included through a PHP include statement. You could have two separate navigation files, or, as Christine points out, you can solve the problem with this CSS trick. If you give the home page link an id, and the body tag has an id, then you can use CSS to make that link disappear when the user is on the home page. You’d achieve the effect through the usual process of chaining together CSS selectors:

#idForBodyOnFrontPage #idForHomePageLink { display:none; }