css 101

It's easy to figure out what "Style Sheets" means, but what is the "Cascade?" The term refers to the way CSS rules are inherited down through a hierarchical chain. To understand this, you need to first know that CSS style rules can pertain in any of three places:

1. An entire site
2. A single document
3. A subset of a document (like a paragraph, or even a single character)

Let's say we decided that all paragraphs in our site should be rendered in a 12pt. bold blue Verdana font. And let's say that on a single page of our site, we decided that paragraphs should be rendered in 13pt. italic green Tahoma. And let's say, just because we're nuts, that one of the paragraphs on that page should be rendered in 14pt. underlined pink Times New Roman. In all three cases, we're applying a rule to a single HTML element - the P tag. So should that one page have blue paragraphs, or green? Should that one paragraph in the middle of the page have green, pink, or blue characters? There's a conflict here - who wins? This is where the "cascade" comes in, and the cascade rules say:

"When style rules conflict, the rule that applies to the more specific context wins."

A single page of your site is more specific than your site as a whole, so the rules attached to that whole page win over the site-wide rules. And a single paragraph in that page is more specific than the page as a whole, so that one paragraph will be pink.

In actual practice, you'll use a single site-wide stylesheet most of the time and won't be dealing with many conflicts like this, so the issue rarely comes up. And yet, when it does, the cascade is an easy-to-understand, powerful tool you can put to great use. We'll explore it more later.