Style Sheets - Part 11 (Cascading)

Now at this point, you may be wondering why style-sheets are called "Cascading Style Sheets."

This mostly has to do with what happens when more than one style applies to a given element. For example, consider the following style specification: 

<STYLE type="text/css">
   P {color:blue}
   P.spaz {font-style:italic}
</STYLE>
Now, suppose you have a paragraph like this: 
<P CLASS=spaz>
Because of Y2K, all of the computers are going to fail, the power grid will
collapse, and angry mobs will be running through the streets killing your pets
and eating your children!!!! And they're going to drink your Guinness!
</P>
Question: What does the resulting output look like?

Answer:

Because of Y2K, all of the computers are going to fail, the power grid will collapse, and angry mobs will be running through the streets killing your pets and eating your children!!!! And they're going to drink your Guinness!

In this case, both of the above paragraph style rules apply because the paragraph is clearly both a <P> element and a <P CLASS=spaz> element. The key point is that properties defined for general elements "cascade" down to more specific elements in a page. Or if you're up on your object-oriented programming, you might say that style attributes are inherited from the most general to the most specific.

Of course, these leads to the next obvious question: what happens if I do this? 

<STYLE type="text/css">
   P {color:blue}
   P.spaz {font-style:italic}
   P.guinness {color:red; text-align:center}
</STYLE>
and have a paragraph like this: 
<P CLASS=guinness>
I would really like to have a big Guinness right now.
</P>
Clearly the paragraph can't be both red and blue. In these instance, the most specific style rule is always applied (overriding the global behavior):

I would really like to have a big Guinness right now.

Next