Typo3 and CSS: Style Your Pages based on their Alias or UID
If you look at all the pages of a particular site, you will notice that most pages share common parts. These common parts typically include navigation, header, footer, styles and so on. Of course, you can duplicate the common part in every html file on that site. But as the site grows, making a change to one of the common parts ends up in a lot of tedious work: you need to apply the change to every single HTML file on the site. Now imagine your site has 1000 pages! You don't want to do that.
Just like in so many other areas of computing, duplication is bad. In order to prevent duplication on your site (unlessyou have a really tiny website) you need to use either a CMS or a template-based offline authoring tool like Macromedia Dreamweaver MX or Adobe GoLive. CMSes and offline editors are completely different things, but how they deal with the duplication issue is very similar: templates. Typo3 has them, Drupal has them, Dreamweaver and GoLive have 'em too. Now, I'm not going to tell you why using a CMS is good for you. You wouldn't have visited this page if you weren't already using Typo3 or at least planning to do so. Let's get down to business.
Sometimes the templated parts of pages aren't completely identical — a different word here, this text in bold and that picture over there should only be shown on the top level pages. If the differences justify it, you could simply create an extension template of your main template and apply the changes to it. If the differences are small, a whole new template isn't always necessary. A commonly used trick with CSS and template-based sites is to assign different IDs to each of the pages' body tags:
<body id="products_body"> <a id="home_link" href="/home.html">Home</a> <a id="products_link" href="/products.html">Products</a> <a id="support_link" href="/support.html">Support</a> ...
and then use these IDs to create styles that only apply to individual pages:
#products_link { color:blue }
#products_body #products_link { color:red }
...This makes the link to the products page blue, except when it occurs on the products page itself, where it will be shown in red. There are other ways to achieve this result, for example, using styles embedded in the header of each page in addition to an external style sheet, but we'll focus on the id body id solution because it is a really useful mechanism for Typo3 as well.
Now, how can we employ this technique on our Typo3 site? Put the following TypoScript in your root template. Typo3's body tag handling is a bit convoluted when used in conjunction with "Modern Template Building" (extensions CSS Styled Content and Template Auto Parser), so if you're already doing some kind of body tag magic, you'll need to fuse your magic with mine. ;-)
body = TEXT body.field = alias // uid body.wrap = <body id="body_|"> page.bodyTagCObject < body
Clear your cache, go to a page on your Typo3 site and look at its source. The body tag will now look like
<body id="body_2">
or
<body id="body_home">
in case the page has an alias (highly recommended).
That's basically it. Surprised that it's over already? Well, you'll need to write your own CSS style rules. For example, on one of my sites, I hide certain images on the home page:
#body_home #images-header img { visibility: hidden }
It's up to you. The sky is the limit.