Might be worth making this a Community Wiki - edit the post and tick the CW check box
–
ChrisF♦Jun 25 '09 at 9:59

1

w3.org should have been the first thing that came up when you Googled this. You did Google this first, right...
–
QueueHammerJun 25 '09 at 20:23

1

If you're anything like me, the "Cascading" refers to the cascading amounts of time you will spend adjusting your div width in two pixel increments to get things to look "just right," rather than focusing on your fundamental business logic. (I'll probably get a few negatives for that answer, but it's just so true)
–
JohnMettaJun 25 '09 at 20:24

8 Answers
8

"Cascading" in this context means that because more than one stylesheet rule could apply to a particular piece of HTML, there has to be a known way of determining which specific stylesheet rule applies to which piece of HTML.

The rule used is chosen by cascading down from the more general rules to the specific rule required. The most specific rule is chosen.

would render the p at 14pt font because it's "closer" to the actual element (external style sheets loading from top of file to bottom of file). If you use a linked style sheet and then include some CSS in the head of your document after linking to the external CSS doc, the "in head" declaration would win because it's even closer to the element defined. This is only true of equally weighted selectors. Check out http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html for a good description of the weight of a given selector.

All that said, you could consider 'inheritance' as part of the cascade as well - for all practical purposes. Things "cascade" down from containing elements.

You have to think of it from the outside in. If you have a rule that that is on the body tag it will "cascade" through every child tag. If you put a rule on any tag inside the body it will adopt that rule, and so on. So the rule cascades through all the content unless interrupted by a rule from an embedded tag.

The cascading is to pick the right value from multiple origins. But it's different from sorting. Only something not in order need we to sort. But in CSS these origins have fixed precedence. And thus the pseudo-code might look like the follows:

initialize the value array;

apply the values from 1st origin;

apply the values from 2st origin, override if the value exists;

...

apply the values from Nth origin, override if the values exists;

From the pseudo-code you can see it quite looks like a waterfall of several cascades.