What Is the Meaning of "Cascading' in Css

What is the meaning of cascading in CSS?

"Cascading" in this context means that because more than one stylesheet declaration 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 declarations to the specific rule required. The most specific declaration is chosen.

Read the official W3C specification on cascading here: https://www.w3.org/TR/css-cascade-4/

What is the meaning of “cascading” in Cascading Style Sheets?

The cascade describes in what order properties are applied on elements.

CSS cascading with examples

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

In CSS, what is the difference between cascading and inheritance?

Inheritance is about how properties trickle down from an element to its children. Certain properties, like font-family inherit. If you set a font-family on the body, that font family will be inherited by all the elements within the body. The same is true for color, but it is not true for background or height which will always default to transparent and auto. In most cases this just makes sense. Why would the background inherit? That would be a pain. What if fonts didn't inherit? What would that even look like?

The cascade is about what take precedence when there is a conflict. The rules of the cascade include:

1. Later properties override earlier properties
2. More specific selectors override less specific selectors
3. Specified properties override inherited properties

And so on. The cascade solves any conflict situations. It is the order in which properties are applied.

(update) Specificity is the calculation used to determine selector priority in the cascade. When two selectors apply to the same element, the one with higher specificity takes precedence.

1. Inline styles have a very high specificity (1000)
2. ID's have a specificity of 100
3. classes/attributes and pseudo-classes add 10
4. elements and pseudo-elements add 1

Add up all the parts in a selector chain to determine the total specificity. In case of a tie, the last selector takes precedence.

Of course, that comes with various edge-cases and caveats. One class will always override plain elements, no matter how many. More targeted selectors are given priority over inherited properties from parent selectors. And you can throw out all your calculations if someone used !important — that trumps everything.

CSS cascading order - author vs user

Author

The developer of the original CSS code for that application. Let's say the Front-end developer of StackOverflow website is the Author here.

Any changes made on Author code will effect the application style for
everyone.

User

You want to have custom style for the pages that you view. Eg: If you need to change the background color of Stackoverflow website, you can use Stylish extension to append your custom style rules. Now you are the user here.

You can filter the user styles in the Style Side Panel which shows the system applied styles as well as user defined custom CSS.

Any changes made on this code will affect only your browser.

Are CSS @media query statements cascading properties specified in em unit?

In your example, font size will end up being 0.5em, because the second font-size definition overrides the first one according to the usual CSS rules.

And if you would change the order of the two media queries, then the resulting font size would be 2em.

Here's a snippet which demonstrates this.

Note that the text will be bold (1st media query), italic (2nd media query) and red (the definition from the 2nd media query "wins" according to the usual CSS rules).

Font-size will be set to 0.5em, because the 2nd definition overwrites the first one (NOT 1em, as it would be if the 2nd definition would be applied cumulatively "on top" of the 1st one).

@media screen and (max-width:10000px) {  p.styled {    color: blue;    font-weight: bold;    font-size: 2em;  }}
@media screen and (min-width:1px) {  p.styled {    color: red;    font-style: italic;    font-size: 0.5em;  }}

<p class="styled">Text with styles from both media queries applied.</p><p>Text with no styles applied.</p>