CSS override with second stylesheet

Question

I'm working on a pretty large website that has a big stylesheet already on the website. We're working with this large corporation with limited ability to make changes (no full access).

We'll be applying some new styles for a specific section on the website and we've been given the green light to include a second override stylesheet (in addition to the global one) if needed.

My question is this. Are there any browser incompatibility issues we need to be aware of if using this method? Due to the popularity of this website and how many views they receive daily, we'll need to be as compatible as possible and I'm just wanting to make sure that our CSS overrides for the sections we're working with go off without a hitch.

I've heard of some rumors that IE may not handle the overrides correctly. Here's an example of the nature of the types of style overrides we'll be doing...

if i have body { color:blue; } and body { font-weight:bold; } in the second CSS file, we'll get blue and bold right?

Answer 1

There aren't inherently any browser incompatibility issues that I know of. Just make sure that you're testing in all the browsers you care about with each step and you should be fine.

Your example of 'bold blue' is correct. It should work that way.

You should take a moment and read about CSS specificity and inheritance. These links will explain how CSS values are "merged" between multiple rules on the same selector.

• http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
• http://www.w3.org/TR/CSS2/cascade.html

Answer 2

I don't think there are any incompatibilities. Just make sure, that the specificity of your overrides is greater than the "original's" or if they have the same specificity, the override is declared after the "original".

More about specificity: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 3

If there are inflicting styles then you could use the

body {
    color: #000 !important;
}

!important overrides the style. Sadly, IE does not support this though.

Answer 4

What you are describing with your CSS is inheritance, and essentially it will 'stack' your css definitions, so as you made the example of body { color: blue } , body { font-weight: bold; } you will end up with both values for body via inheritance (not overriding!)

To counter the inheritance, you would need to zero out, or elminate the primary css sheets defnition.

so if you had the example:

body { padding: 5px; color: red }

and you wanted to have a 3px margin with font color blue in your 2ndary sheet you would do the following to counter the inheritance

body {padding: 0px; margin: 3px; color: blue }

That way you would zero out the padding (to 0, if you so wished, effectively canceling it out). Color would be overwritten, and margin would be the new value added.

I would suggest (if you already don't) to use Firefox with firebug enabled (dual screens help here greatly, but not needed). Firebug will show you which lines are canceled out due to inheritance and in essence are overwritten.

You could also utilize your own classes, and double (or more) up on the class definition like so:

.red { color: red; }
.center { text-align: center; }
.w500px { width: 500px; }

<div class="red center w500px">This text is red and centered</div>

This way you just combine the values into one. Might give you another idea on how to go about something differently.

Hope that helps.