Alan Holden's Land o' Style

Cascade Pecking Order

Often confused with "inheritance"

agent (browser) default sheet applied by agent manufacturer
sheet applied by the user
sheet applied by the content author
a style marked "!important" by the author
a style marked "!important" by the user

Specificity

Rule Computer

Obtain specificity rating for a selector or rule

Style attribute within the tag? (style="color:#ccc;")
Qty of ID selectors? (#AlsList #AlsInnerList {color:#000;})
Qty of Class & Attribute selectors? (.menu .footerText {color:#fff;})
Qty of Type / element / simple selectors? (p li {color:#999;})

Specificity ranking;  

Universal selector

*

It's what defaults all the text here to an ugly blue

#ID selectors

This is a div with the ID "IdSelector". Only one element on the page should have this ID.

.Class selectors

This is a div with the class "sectionHelp"

Pseudo (class) selectors

Rules based on state

Whether or not this anchor tag is under the mouse or this has focus.

Type / element / simple (Tag name) selectors

all h4 tags are blue

The body selector is what applies the left margin

Descendant selectors

This h4 tag also has an anchor tag within

Advanced selectors

Children Only

Target parallel child tags below an ID'd parent tag

Children Only IE6

Target parallel child tags below an ID'd parent tag
Internet Explorer version

First Child Only (Adjacency)

Target first child P tag below every parent H6 tag
Granny

Jethro

Ellie Mae

Matt Groening

The Simpsons

Futurama

Attribute

Target tags with a specific attribute, and containing specific value

p tag with a title containing text

p tag with a title containing foo

p tag with a title containing foo bar

The Block Box model

Margin -> Border -> Padding -> Content
margin (will collapse into natural margin above)
border
padding
CONTENT!
margin (will collapse into natural margin below)

The Inline Box model

Line height -> Margin -> Padding -> Content-> Padding -> Margin
margin padding CONTENT! padding margin line height