Apply different css stylesheet for different parts of the same web page

Question

Hi,

I have a web page with different parts which require different css stylesheets to be applied to each. What I would like to know is how to specify which css stylesheet to use for each different part of the web page. if I leave them all together, the components do not get displayed properly.

Thanks

C.

Answer 1

Use different class for each part in your web page and customize the CSS code for each class.

Answer 2

It is called Cascading Style Sheets (CSS) for a reason ..

use the specificity rules of CSS to target each section..

ie..

#section1 a{color:red}
#section2 a{color:blue}

this will make all links inside an element with id section1 be red, and all links inside an element with id section2 be blue..

<div id="section1">
 <a href="#">i will be red</a>
</div>
<div id="section2">
 <a href="#">i will be blue</a>
</div>

Answer 3

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:

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