[Arenlor]

This tutorial is meant to be a quick and simple guide and is a refinement of W3C's Guide in order to help explain the common overlook of the C in CSS which is cascading. This is not meant to explain all of CSS nor to fully explain in detail cascading.

First off is how it works in a most basic level. Which in order of importance is:

• Specifically defined value, in other words defining what color p should be.
  
• Inherited values, in other words, defining that body should be red makes all text in it red.
  
• The initial value as specified in the (X)HTML definitions, which for the most part states it's up to the browser to determine it, and most browsers let the system determine that for them.

Now you know that if a system defines the color it can, but may not, be used by the browser. If the browser defines a color (maybe the color the system defined) it will be overwritten by any site settings. Any general site setting will be overwritten by a specific setting. This goes for every single part of CSS, positioning etc.

If you include a CSS document (whether inline or external) using the @import it will have the same level of cascade as where it was included. Now on to that. The order of importance are:

• Style values on an element
  
• Inline style elements in style tags
  
• External stylesheets

Also note that order is important, if you include two external sheets the one listed LAST will override any settings in the first. One last bit before you go off for a coffee break to digest this all. The order for stylesheets is:

• User sheets values with a !important declaration. (! is not being used as NOT here, but rather as BANG)
  
• Author sheets values with !important. (Your website's CSS is the author CSS)
  
• Author style sheets values other than those with !important
  
• User sheets values other than those with !important
  
• Browser sheets

I'd like to note that if you declare what media it is for that they will take precedence (or be ignored). Now go have coffee and sift through this.

Welcome back! So by now you should understand that if on an element there is a !important in the style value that the only thing that can override it is a !important in a user style sheet. You should also know that you can override your external style sheet(s) by placing internal sheets in your document. You can override internal with inline. You also know that order matters. Now onto the last and most confusing part, counting the specificity (how specific is it really?)

First you count how many element names you have:

* {} /* 0 names */
p {} /* 1 name */
body{} /* 1 name; Note though, this would overwrite anything in p's declaration */
html,body{} /* 2 names; Note this would overwrite anything in the previous body, but is perfectly legal */
html{} /* 1 name; Note this would NOT overwrite the previous html */

Then you count how many attributes other than IDs and pseudo-elements you have:

* {} /* 0 again */
a{} /* 0 here */
a:href /* 1 here */
a.red:href /* 2 here */
link[rel=stylesheet] /* 1 here */

I think you get the idea of how to do that. Lastly you count the IDs. I don't feel I need to explain how to count the number of IDs used in each. After you have all three numbers for each declaration you smash them together with the element names on the right, and the IDs on the left to get a set of 3 digits (you're supposed to use an infinitely large base number system to do this, but just think of it like this: x.y.z and then you can easily use any base system).
The number of IDs get precedence: 1.0.0 is more important than 0.99.99 but is less important than 1.0.1. See how using a full stop helps, since you're so used to versions like that you can read them easily. In the previous code a.red:href would be 0.2.1 while a:href would be 0.1.1 and therefore would override. If you used a.red:href#header though it would be 1.2.1 so as you can see, if you can count you can easily figure out what will override what.

I hope that I explained this clear enough, I'm not a great writer as my style is Stream of Conciousness, and I'm easily distracted. If you have any questions about this guide ask in comments on here. If you have any questions about CSS in general or a specific CSS question ask in the HTML & CSS forum.

A final note that I'd like to add is that in any fully conforming browser (which I don't think any are) any HTML style elements (the font tag) should be converted to their CSS value and should act as an external style sheet placed at the very beginning of the document and have specificity of 0.0.0 meaning that any style sheet would override them.