Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
|
You can definitely use more than one style sheet, though you still might be able to solve your problem with one style sheet.
One thing you might do is set up one style sheet with all the styles that will be consistent across pages and then set up different style sheets for the styles that differ. You might end up with
main.css
about-us.css
contact.css
The names could be anything of course, but with the above main.css would be the consistent styles and about-us.css and contact.css would be style sheets specific to those pages only. This solution wouldn't require one style overriding another since you would only include the css files necessary for the page.
As far as styles overriding each other that's what the cascade in cascading style sheets is all about. Here's a page from w3org on cascading and inheritance with the details.
A few simple concepts:
If you have
h2 {color: red}
h2 {color: blue}
in that order your h2s will be blue. Whichever comes last (or closest to the actual h2 element) is the style that gets used. So if you have two style sheets with different rules on the same elements, classes, or ids, the one you list second will likely be the one that takes precedence.
I say likely because of the specificity rules. While two rules may look the same, they may not be.
p.red {color: blue}
.red {color: red}
aren't the same The first one is more specific and so any paragraph assigned a class of red would actually display blue text given the above two rules.
See if the w3.org page clears it up. Specificity can be a little confusing and you may not need to worry about it when setting up your site, but it's still good to know.
|