In what order is styles applied?

[aQustic]

I've always tought that css rules is applied in the order they are defined in an external style sheet file or in the <style> tag, but then I ran into a problem where a generic class that sets the font color wasn't applied to an element inside a div with an id.

Could anyone explain to me why the 4. anchor in this example isn't blue like the 2. anchor that has the same class?

Example

[Paul O'B]

Hi,

Its all do with specifity and weight.

To overide the id you will need to be more specific.

div#myblock a.myclass  { color:#00f; }

This style is more specific div#myblock a { color:#0f0; } and targets a elements with more weight than a simple class like a.myclass { color:#00f;}.

Therefore you have to use make your targetting morw specific. Id's carry more weight than classes and there is an algotithm used to determine which style is applied and the more specific you make the targetting then the higher the weighting of the style.

See here for more info:

http://www.meyerweb.com/eric/css/link-specificity.html

Paul

[aQustic]

Thanks, that'll help me fix things.