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

64,247

Solution 1

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.

Solution 2

Just re-define it somewhere after your @import directive:

#content { height: 456px }

for identical CSS selectors, the latter rule overwrites the former.

Solution 3

In page5.css, simply re-define the height.

page5.css

#content {
    height:400px;
}

64,247

Asim Zaidi

I am a Software Architect @ WADIC. You can visit me at WADIC

Updated on February 14, 2020

Comments

Asim Zaidi about 4 years
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?
BoltClock about 13 years

Heck, just throw in a <style> tag.
Wesley Murch about 13 years

+1 This is what I do as well, except my body class names are pretty gross, like USERS USERS-CREATE. I use caps to flag it as a body class and use it pretty rarely, I just like the way it stands out in my stylesheets (like a TODO) because I think there isn't really a need for this in general. For instance, page5 I need a little bit more height reeks of bad design - but it does have its uses I guess.
Martin Thoma over 9 years

You should eventually add that this css can be added to the page with <style type="text/css">...</style>