Creating specific page styles with CSS

Posted in on 31 October 2007

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...

Technorati : ,

Related Posts

Comments

  1. Markjohnson 24 January 2010, 19:48 1

    Hey Thanks for this tip, it will surely help me with styling different pages in my small website. Thanks mate

  2. ket 28 March 2011, 14:37 2

    Old post but very useful tip.

Textile Help
Stop looking at my bottom