CODEWITHSUNDEEP
csscss-selectorscss-sprites
Asim Zaidi
Asim Zaidi

Reputation: 28294

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?

Upvotes: 11

Views: 87766

Answers (5)

Sheikh Wahab Mahmood
Sheikh Wahab Mahmood

Reputation: 418

You can do it using 'id'.

HTML

<a id="contact" href = "mailto: [email protected]">Contact us.</a>

CSS

#contact{
   text-decoration: none !important;
   font-size: x-large;
}

Upvotes: 0

user2060451
user2060451

Reputation: 2688

The other answers did not help me on a more complex page.

Let's suppose you want something different on page X.

  1. On your page X, create a class at the body tag (body class="myclass").
  2. Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
  3. Check the parent of the modified field.
  4. Add the HTML tag to your developer tool as testing
  5. f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
    Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class The symbol > means you are going up on the tree.
  6. You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.

This works for me.

Upvotes: 0

mVChr
mVChr

Reputation: 50185

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.

Upvotes: 28

Dutchie432
Dutchie432

Reputation: 29160

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

page5.css

#content {
    height:400px;
}

Upvotes: 1

Pekka
Pekka

Reputation: 449505

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

#content { height: 456px }

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

Upvotes: 2

Related Questions