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 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;
}