If you do anything at all with CSS then you need to know about specificity. Even if you merely dabble here and there you still need to have, at the very least, a basic grasp of the concept. Getting to grips with specificity completely is like saying the word itself — difficult. Don't worry about that though - just make sure you understand how it can affect the end result of what appears in your browser.

You probably know that if you have a rule like this in one stylesheet:

p {
 font-weight:normal;
}

And then the following rule in a stylesheet loaded after that one:

p {
 font-weight:bold;
}

Then all paragraphs will be bold. This is because of the C of CSS — the cascading nature of styles. The latter rule takes priority. This is useful to know, but not half as important as specificity when it comes to working out why adding a new style rule sometimes doesn't have the intended effect. It's usually because there's another rule which is more specific. It's doesn't matter if it's higher or lower in the order of the rules. If it's more specific then it over-rides your new rule.

As a simple example. Say you've got a H1 inside a DIV called "content". Somewhere inside the massive stylesheet you're adding to is the following rule:

#content h1{
 color:red;
}

Unaware of this rule you add the following to the bottom of the same stylesheet:

h1{
 color:green;
}

Refreshing the page you're flummoxed to find that the header is still red. This is specificity in action. The rule which names the containing div is more specific and so trumps the one you added.

In the past finding out which rules were in play would have been a nightmare. Luckily now we have tools at hand to help us.

Firebug is great at showing which style rules are actually being used.

The screengrab to the right shows how the padding style of 1 pixel for code elements is not used as it's over-written by the padding of 3px for code elements inside an element with a class of "code" — hence more specific. Note the line through the padding declaration. This is what tells us it's not in fact being used.

Note that the background-color setting from the less specific rule is still used as there's no background-color setting in the more specific one that can over-ride it.

To get this screen to appear for your problem area. Open the page in Firefox, right-click the element and choose Inspect Element.

This is merely a simple overview of specificity. To get a better idea of how it works here's a great article I'd recommend you all read.