two external style sheets for the same page

reference two external style sheets for same page

[Adam5000]

I've got over 100 pages on my web site and I'd like them all to have some things in common and be different in other ways.

For example, for the body, I'd like them all to have a 5% margin. But for some of them I'd like to have a blue background, and for some of them I'd like to have a green background.

Possible code is below.

External style sheet for all pages (110 pages)

body
{
margin: 5%;
background-color: blue;
}

External style sheet for section 3 (20 pages)

body
{
background-color: green;
}

What I'm trying to do is have a 5% margin on all pages, with a blue background on 90 pages, and green on the other 20 pages. One solution is to add margin: 5%; to the second style sheet, but I'm trying not to be redundant and put the same information in two different style sheets. What I'd like to do is reference two different external style sheets on one web page. Is there a way to do that?

Help!

[Gibble]

Include both style sheets.
Both body styles will be combined.
The tough part is when they both contain the same item (background-color), you don't know which will be used.

This is where css specificity comes into play. (google it, it's not too terribly hard)

When the css selector (in this case body) have the same specificity the latter should take precedence.

So if you include your css file for everything first, then your specific one second, the background-color: green; rule should be applied.

If it is not, you could just add !important to the rule:
background-color: green !important;

But, it's better to use specificity if you can