Apply different css stylesheet for different parts of the same web page [duplicate]

Question

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.

Answer 1

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.

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

An external stylesheet is applied to whole html page. In order to apply different stylesheets to different portions, Firstly, the html page has to be divided into different sections using the html tag ( with each html div to be assigned a unique id or class) Secondly, the external stylesheet to be applied to each div has to be designed according to the id/class assigned to it

Example as explained above by Gaby aka G. Petrioli...