So, what is this cascading business about? The cascading model depends on the idea that you can specify style sheets at more than one level. The lowest-level style sheet takes precedence.

For example: say your company has a corporate style sheet, called corporate.css. Your department might have its own style sheet called hr.css. Finally, you might want to create a specific style for a class of the DIVelement, right in the HTML document.

You could even define styles at the element level in the BODY of your page, but that isn’t included in this example.

How does this work?
In your HTML HEAD element, you would create a link to the corporate style sheet, then another link to the department style sheet. Following those, also in the HEAD element, you would define a style for the DIV element, using the STYLE element. Now, say the corporate style sheet had the following styles defined (to name a few):

> background tan
> text color brown
> font face Helvetica
> H1 is 22pt, H2 is 18pt, H3 is 16pt

Say the department had the following style defined (to name one):

> H2 is 20pt, H3 is 18pt, H4 is 16pt

And in the STYLE element in the HEAD element of your page, you define a DIV element with a class of highlight with a background of white and text color of black, with a black border.

What would show up in your document?

Everything from the corporate style sheet that is not also defined in the department style sheet, and everything in the department style sheet that is not defined in the STYLE element, and everything in the STYLE element that is not defined at the element level.

The result would be:

> background tan
> text color brown
> font face Helvetica
> H2 is 20pt, H3 is 18pt, H4 is 16pt
> DIV class of highlight with a background color of white, text color of black, with a black border