what is the meaning of "cascading " in CSS

Question

Hi All, Just want to know whats the exact meaning of the term "Cascading" in CSS.I am getting different views ,So thought of asking here.An ex. will help :-) Thanks.

Answer 1

"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.

Answer 2

CSS doc    
p{font-size: 12pt;}
p{font-size: 14pt;}

<p>My Headline<p>

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.

Answer 3

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)

Answer 4

When I teach CSS, I always tell the students that "cascading style sheets" means something like "fighting style sheets".

One rule tells your H3 tag to be red, another rule tells it to be green -- the rules are contradicting each other, who will win!? Style sheet deathmatch!

OK maybe that's a slight exaggeration, but it's far more amenable to non-code, non-programming people who are just starting out than any notion of a cascade, or inheritance.

I do of course make sure to tell them that it's not a problem for the style sheets to be fighting each other, that's the way the language was designed.