A Beginners Guide to CSS

Page 5

Cascading

So why are they called cascading stylesheets? Because when you apply a rule to an element, that rule also applies to any of that element's descendants. Consider the following example.

<html>
<head>
<title>My Web Page</title>
<style type="text/css">
body {font-family:arial,sans-serif; font-size:11pt;}
#heading {font-size:20pt; font-weight:bold;}
ul {font-variant:small-caps;}
i {color:#ff0000;}
</style>
</head>
<body>
<h1 id="heading">Observations on American Idol</h1>
<ul>
<li>I could go up on the stage and cough up a hairball, and Paula Abduul would applaud it as an incredible performance.</li>
<li>At least a quarter of each night's votes must come from the same two dozen 14-year-old girls, which explains how the pretty-boys with terrible voices stay on the show.</li>
<li>Ryan Seacrest must have been assigned his position out of pity, because he has <i>no</i> talent and even less fashion sense.</li>
</ul>
</body>
</html>

Okay, the previous was a styled buletted list. Now, you may agree or disagree with the points made, but notice how the cascading takes effect: a style setting font-family and font-size applies to the body element - essentially the entire document. So all our text is 11 point arial. But when we hit the heading, that style is overridden by a more specific rule, which sets the font-size to 20 point and makes it bold. We've also styled the ul element. Note that styling li rather than ul would in this case have the exact same effect, but if both were styled and the two styles conflicted, li would take precedence. Lastly, notice the i tag. Because of the style we've given it, it will appear in red. It will also be rendered as italic, because that is one of the tag's default properties. We could have set its style to text-style:normal, but then there'd be little point in using an i tag.