csscss-selectorscss-sprites

How can I apply CSS style changes just for one page?


I have two css files:

  1. A main file (main.css)

  2. A specific page file (page5.css). My page.css contains main.css (@import url(main.css));)

My main.css has this as one part of it that sets the height of the page

#content {
    background:url(../images/image.png) no-repeat;
    width:154px;
    height:356px;
    clear:both;
}

This works fine for all the other pages, but at page 5, I need a little bit more height.

How would I go about doing it?


Solution

  • You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:

    <body class="page5">
    

    Then in your CSS you could apply:

    .page5 #content {
      height: XXXpx;
    }
    

    And it would only apply to that page as long as it occurs after your main #content definition.