Creating specific page styles with CSS
I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.
Yesterday, I was asked if it was possible to create individual page styles using CSS. In this case, the same style sheet would be used but there would be a specific style rule for page x compared with page y. For example, you may want to have a different background image for your home page compared to your 'product' pages. Perhaps the home page has a 'blue theme' and the product pages are 'color coded' with a different colour...
In fact, this is quite easy to do with CSS and it's a method that I have been using a lot recently. The first step is to give an ID to the <body> tag of each page so that you have a 'hook' to pin your CSS styles to. Here's a simplifed HTML page with a body ID added.
<html> <head> <!--Head content here--> </head> <body id="page1"> <!--Your carefully crafted HTML content here--> </body> </html>
Each page would have a different ID if required. The next step is to create style rules in your style sheet that refer to each page ID. For example, if you have a <div> element with an ID called 'wrapper', you could use a different repeating background image for page 1 compared with page 2 like this:
#page1 #wrapper {
background: url(images/page1-background-image.gif)
repeat-y left top;
}
#page2 #wrapper {
background: url(images/page2-background-image.gif)
repeat-y left top;
}
The second rule will take precedence for the wrapper <div> on page 2.
There are many other uses of this technique. For example, it can be used to give navigation link buttons a different colour in order to indicate the page that is currently being viewed. Or, the method can be used to change some pages from a 3-column layout to a 2-column layout, simply by changing the layout <div> styles for each page ID. I'm sure you can think of other uses.
If you are using Dreamweaver and its template system to create pages, you may think that there is a problem with this technique because the <body> tag is not editable by default in pages created from Dreamweaver templates. However, it is possible to make the body tag attribute editable using Dreamweaver and to change this on each page. But, that's a subject for another day...
Comments
24 Jan 2010 18:48:01
Hey Thanks for this tip, it will surely help me with styling different pages in my small website. Thanks mate
28 Mar 2011 14:37:28
Old post but very useful tip.
17 Apr 2012 22:43:19
Rad!! Thanks, man. You’re a lifesaver.
Comments are OFF for this post.