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

css stylesheet
C.. picture C.. · Jul 21, 2010 · Viewed 62.4k times · Source

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

Ned Batchelder picture Ned Batchelder · Jul 21, 2010

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.

Related questions

Can you use if/else conditions in CSS?

I would like to use conditions in my CSS. The idea is that I have a variable that I replace when the site is run to generate the right style-sheet. I want it so that according to this variable the …

Read More
How to use HTML to print header and footer on every printed page of a document?

Is it possible to print HTML pages with custom headers and footers on each printed page? I'd like to add the word "UNCLASSIFIED" in Red, Arial, size 16pt to the top and bottom of every printed page, regardless of the …

Read More
How can I make a TextArea 100% width without overflowing when padding is present in CSS?

I have the following CSS and HTML snippet being rendered. Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent. Is there a way to continue to use …

Read More