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.
Asked
Active
Viewed 4,244 times
0
-
1RTFM: http://www.w3.org/TR/CSS2/cascade.html#cascade – MetalFrog Jun 27 '12 at 15:52
-
There is an example in the first question you link to. Try scrolling down. – BoltClock Jun 27 '12 at 15:52
-
Have you done your homework? The wikipedia entry on CSS explains what cascading is: http://en.wikipedia.org/wiki/Cascading_Style_Sheets – YuriAlbuquerque Jun 27 '12 at 15:53
-
@BoltClock Yes there is some example but that answer didn't get any votes. So I am bit suspicious about it . – Inquisitive Jun 27 '12 at 15:55
2 Answers
3
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):
- user agent declarations
- user normal declarations
- author normal declarations
- author important declarations
- 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...
Steve H.
- 6,912
- 2
- 30
- 49
-
+1 Specificity is one of the specific components that make up the cascade. (Not an intentional pun. I swear.) – BoltClock Jun 27 '12 at 16:00
-
@Steve H thanks for the links . Both these links have really good explanation for specificity which according to BoltClock is just one of the components of cascading. I am eager to know what are the other components. This is exactly why I have not set your answer as the accepted one yet. – Inquisitive Jun 27 '12 at 16:26
-
1
On inheritance vs cascade:
"Inheritance is a mechanism that’s separate from the cascade: inheritance applies to the DOM (Document Object Model) tree, while the cascade deals with the style sheet rules. However, CSS properties set on an element via the cascade can be inherited by that element’s child elements." - http://reference.sitepoint.com/css/inheritance
FZs
- 16,581
- 13
- 41
- 50
Mads Mobæk
- 34,762
- 20
- 71
- 78