Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

Where's The Cascade In Cascading Style Sheets? (Part 1 of 2)

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v2 i9
Originally Published: May 4, 2006

So what's with The Cascade?

A cascade is a succession of stages, processes, operations or units.

The CSS cascade is made up of a succession of style sheets each influencing how a web page looks. The succession deals with the sorting and prioritizing of the rules that define the style of a page.

Representation of the three Cascading Style Sheets

Representation Of The 3 Style Sheets Which Influence How A Web Page Looks

CSS is about the conflicts between style rules, and how they are settled. Always keep that in mind and you'll be well on your way towards effectively using its awesome power.

If you think about how you can cascade layers, as in the graphic above, you'll get a visual picture of how CSS works. User agents (web browsers , if you prefer) support three style sheet types. The three types of style sheets are Browser Style Sheet, User Style Sheet and Designer Style Sheet.

(To make things a tad more interesting, the Cascade model is also used to prioritize the style rules that you, as designer/web author, create in the Designer Style Sheet. In the Designer Style Sheet, there are 3 different locations for style rules, each having a different priority. I'll explain more later when we get to the section on Designer Style Sheets.)

Are you still there? That was the hard part. All this will make more sense as you start to learn and work with CSS.

Here's the big point: All 3 style sheets work together to influence, in one degree or another, how every web page looks.

Just how do the 3 style sheets do that? Stay tuned. Part 2 is only two weeks away!!

Page 2 of 2