Question

Please can some one give an example describing cascading as meant in CSS and when are they useful ? I have seen answers describing cascading and also difference between cascading and inheritance but I haven’t see any answer describing CSS Cascading by example.

Answer 1

When only considering “author” stylesheets (not user or user agent), then what you are probably confused about is not so much the “cascade”, but the “specificity” rules for CSS.

Here are some good explanations of how specificity works and how to figure out why certain rules are applied to your elements:

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

http://css-tricks.com/specifics-on-css-specificity/

EDIT: The cascade:
All applicable rules for an element are gathered, then ordered according to their origin (higher number means higher precedence):

1. user agent declarations
2. user normal declarations
3. author normal declarations
4. author important declarations
5. user important declarations

Specificity is used as a tie-breaker if the origin is the same. Finally, if specificity is the same, then declaration order is the final tie-breaker. Hopefully this is understandable without a tedious example…