CSS In Theory
You probably thought you'd be able to jump right into this thing, didn't you? Did you not read the intro? Jumping into CSS without taking some time to understand it leads to, shockingly enough, misunderstanding CSS. It may be tough to stop and take the precious minutes required to read this section but trust me when I tell you that you'll be better off for it.
The first thing you need to understand about CSS in theory is actually a little bit about XHTML and computer science theory: tree structures. You've probably dealt with tree structures before, the most common being a family tree.
Each item in a tree structure is called a "node." Each node can store some information about itself. Those bits of information are called "attributes." Extending that metaphor over to a family tree, each person is represented as a node, and that node can store attributes about that person (like their name, the year they were born, where they were born, and their sex).
Each XHTML tag either represents the start of a node, or the end of a node. So let's represent an imaginary family tree guy as an XHTML node.
<person name="Joe Blow" born="1980" birth_location="East Oshkosh" sex="Male" />
And now, using XHTML we've turned Joe Blow's family tree entry into a node with attributes. (Note the trailing slash at the end of the tag. XHTML requires that all tags be "closed" in some way. Putting the trailing slash tells the browser that this tag is "self closing." Without it, the browser would keep looking for a "</person>" somewhere below to close the tag.)
Parents and Children
Just like nodes on a family tree, nodes in XHTML can have parents, children, and siblings. An important distinction between XHTML and real life is that XHTML nodes can only have one parent each. Nodes are called siblings if they share the same parent (unlike people who can be siblings by sharing only one parent or through marriage). And in XHTML a node may have any number of children.
What's that? You need another example? Fine.
<person name="Abraham Simpson">
<person name="Homer Simpson">
<person name="Bart Simpson" />
<person name="Lisa Simpson" />
<person name="Maggie Simpson" />
</person>
</person>
There, are you happy now? You never care about my needs. (Note the distinction above between self-closing tags and tags that need closure later in the document. If an XHTML element doesn't have children, it's usually a self-closing tag.)
Of course I can assume that you're slipping away already. This is all crazy abstract stuff about family trees and tree structures and XHTML. So let's wrap it back in to CSS.
Why do they call it "Cascading" anyway?
I'm sure there's a real reason and whoever came up with the name will cringe at my almost-certainly-wrong interpretation, but as I've come to understand it the "Cascading" in "Cascading Style Sheet" refers to how CSS styles are inherited from one node to that node's child. Like a cascading waterfall, the styles drop down through the generations. Certain styles are inherited from parent nodes through the XHTML tree structure.
Also, CSS is able to use the tree structure to apply styles to very specific cases. Not only could you apply a style to a certain tag, but you could also apply a style only to certain children of certain tags (like all blockquote tags inside div tags with the ID Content).
But we're not quite there yet, so let's start the theory section with a little bit more about XHTML.