Search code examples
cssstylesheet

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

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.

Solution

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