Cascading style sheets can be very confusing. The idea is that properties that you attach at a top level tag (like the <body> tag will cascade (or follow) downward throughout the html hierarchy. They are not allowed above or in front of the <body> tag. Additionally, nested tags (such as the <div> tag) will inherit the properties of the tags above or in front of them. There are three basic types: inline, embedded and linked. For an explanation and tutorial please refer to Quackit. There are also three ways to include them in your XHTML. You may attach properties to a tag, create an "id" or create a "class". An id variable is usually utilized for a unique element, whereas a class variable is usually used by multiple elements in a webpage. An example of how the cascade (or inheritance) works is shown below.

CSS cascade level 0 - no attached cascading (inherited) properties are attached.

CSS cascade level 1 gray - uses the linked style sheet (example.css) tag properties <div> (a different background color and padding size).

div {
background-color: #c0c0c0; padding: 10px;
}

CSS cascade level 2 gray - inherits CSS level 1 gray background and padding size properties (using the <div> tag) and introduces a different font style property (using the id="fs-1").

#fs-1 {
font-family:Verdana, Arial, Helvetica, sans-serif
}

CSS cascade level 3 gray - inherits CSS level 1 gray background and padding size properties (using the <div>), the CSS level 2 font style properties (using the id="fs-1") and introduces a different font color property (using the id="clr-1").

.clr-1 {
color: #0000ff;
}
CSS level 4 gray inherits CSS levels 1,2 and 3 and changes the font size property (using class="char-1").

.char-1 {
font-size: 12px;
}


The XHTML for the above example

The stylesheet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS example</title>
<link rel="stylesheet" href="example.css" type="text/css">
</head>
<body>

CSS cascade level 0 no attached cascading (inherited) properties are attached.
<br /><br />

<div>
CSS cascade level 1 gray - uses the linked style sheet (example.css) tag properties <div> (a different background color and padding size).
<br /><br />

<div id="fs-1">
CSS cascade level 2 gray - inherits CSS level 1 gray background and padding size properties (using the <div> tag) and introduces a different font style property (using the id="fs-1").
<br /><br />

<div class="clr-1">
CSS cascade level 3 gray - inherits CSS level 1 gray background and padding size properties (using the <div>), the CSS level 2 font style properties (using the id="fs-1") and introduces a different font color property (using the id="clr-1").

<div class="char-1">
CSS level 4 gray inherits CSS levels 1,2 and 3 and changes the font size property (using class="char-1").
<br /><br />

</div>
</div>
</div>
</div>
</body>
</html>