CODEWITHSUNDEEP
css
SarmadK
SarmadK

Reputation: 115

Different css for different pages

I have a blog on Blogger and have some widgets. I was wondering that is it possible that a widget is displayed differently on a homepage as compared to rest of the pages?

For example a box

/* on home page, it should appear like this */
#box {
background: green;
width:200px; height:100px;
}

/* on other pages, it should appear like this */
#box {
background: red;
width:200px; height:200px;
}

Upvotes: 1

Views: 14569

Answers (4)

Michael Unterthurner
Michael Unterthurner

Reputation: 941

give the body a id

<body id="page">

then you can identify it with 

#page #box { 
    .... your CODE
}

I guarantee this will work :)

Upvotes: 2

user2583040
user2583040

Reputation: 83

you have to put this code htlm code page not css code page if you said !important it is override other code

      <style>
             #box {
              background: red !important;
    width:200px !important; 
height:200px !important;
    }    
        </style>

Upvotes: 0

Sudip
Sudip

Reputation: 2051

I would suggest, put an ID into your home page like,

<body id="home"> and other ids for other pages

Now the CSS changes would be

/* on home page, it should appear like this */
#home #box {
background: green;
width:200px; height:100px;
}

/* on other pages, it should appear like this */
#others #box {
background: red;
width:200px; height:200px;
}

Upvotes: 7

Ganesh Rengarajan
Ganesh Rengarajan

Reputation: 2006

You can't apply different stylesheets to different parts of a page. You have a few options:

The best is to wrap the different parts of the page in divs with class names: REFER

  <div class='part1'>
    ....
</div>

<div class='part2'>
    ....
</div>

Then in your part1 CSS, prefix every CSS rule with ".part1 " and in your part2 CSS, prefix every CSS rule with ".part2 ". Note that by using classes, you can use a number of different "part1" or "part2" divs, to flexibly delimit which parts of the page are affected by which CSS rules.

Upvotes: 0

Related Questions