What is the meaning of "cascading" in CSS?

Question

What's the exact meaning of the term "Cascading" in Cascading Style Sheets (CSS)? I am getting different views, so I ask here. An example would help.

Inchoative

Answer 1

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

Condensable

when does class/ID and order come in play? – Elyseelysee

@AllDani IDs are more specific than classes. So I guess you can say the class rule cascades down on the more specific id rule. If 2 rules have the same priority (like 2 classes with conflicting rules on one element) then the last one specified in your css file takes precedence. – Ann

So if ID says "A" and class says "B", then even if class is later in the sheet, ID (A) wins? I.E. Order only comes in play if two styles have the same exact specificity? – Elyseelysee

@DaniSpringer Yes, thats correct. The id selector is even one of the most specific selectors in CSS. For demonstration, it would even "win" against selectors like "div.blubb:hover". Only inline styles and the !important rule have more specificity. – Hophead

Answer 2

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!? Stylesheet 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.

Agueweed

I know this is an old post, but still: I think the example of style sheets and/or CSS rules "fighting" is a bad one. Far more instructive to new learners (in my own teaching experience) is to explain the hierarchy of a rule overriding a previous one. Say, an employee paints a H3 tag red (1st rule), then hands it to his QA manager who overrules him and decides to paint it green (2nd rule). No death match, just corporate hierarchy. CSS rules don't "fight it out", they run (cascade) through a strictly defined hierarchical system of subsequent decisions overruling previous ones. – Kowalewski

I've downvoted this entirely because you give no explanation as for why they "fight" and who will win the fight and more importantly WHY will that one win. These are the fundamental parts of answering this question. – Tranquilizer

To be clear, the weights of the styles determine which one would apply which is known as Specificity. The term "Cascading" has to do with more than just Specificity and includes the Source Order. When the weights are the same, then the source order comes into play (user agent stylesheets --> author stylesheets --> user stylesheets) which works like a cascade. developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/… – Weitzman

Answer 3

Håkon Wium Lie (CSS co-creator) defines "cascade" in his PHD-thesis on CSS as "The process of combining several style sheets and resolving conflicts between them" https://www.wiumlie.no/2006/phd/

Attachment

Answer 4

Every rule from style sheets participate in a 'war' that is similar to cascade. Cascade is a pretty rarely used word and that's why it's problematic to understand the 'C' in CSS.

What is a cascade?

Cascade word means waterfall. Not any waterfall. It's the one that has steps that consists of rocks.

Now imagine that every step is representing a differently placed rule that can apply style to your HTML.

When the water falls from one rock to another 'downwards' then it's not possible to go back with water 'up'. Water has fallen and that's it.

Coming back to CSS world.

The simplified (there is more to that) order is:

• 'STEP' 1. Web browser rules
• 'STEP' 2. External rules (linked to external CSS file)
• 'STEP' 3. Styles inside CSS file
• 'STEP' 4. Inline attribute 'style'

'Cascade' algorithm chooses the 'step' that is the lowest as the most important. Because these are on the 'lowest' place of 'waterfall'. Whatever rule is below overrides what is above.

Let's say you have sample.html file.

Inside sample.html you have a link to external CSS file (step 2), where you put selector and a rule like below:

p
{
  color: red;
}

and in the same time in the head tag of sample.html, you put:

<style>
p
{
  color: blue;
}
</style>

According to 'cascade' the lowest step is step nr 3.

That's why your paragraph is 'blue' not 'red'.

Why bother using 'cascade' word in this case that represents waterfall with rocks? Because when the water falls it TAKES everything with itself down to the bottom.

Why does it matter?

Because if you put inside sample.html in external CSS file also:

p
{
  color: red;
  font-weight: bold;
}

You won't remove font-weight: bold; using:

<style>
p
{
  color: blue;
}
</style>

You will just change the color. Every other rule from 'steps' before are 'kept'. And that's the beauty in it.

Wassail

Answer 5

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.

Maletta

This doesn't imply what takes precedence. Ambiguous? – Elyseelysee

Answer 6

One clarification that may help. If you include two stylesheets and there's a rule with the same specificity in each, the one included last wins. I.E. the last in the cascade has the most influence.

(This is just a variation on having the two rules in the same sheet - the last one wins if all other things are equal.)

Eg, given

body {
    background:blue;
}

body {
    background:green;
}

then the background will be green.

Cryptogram

Answer 7

You can treat the CSS processing as a waterfall contains several cascades. Here are those cascades from top to bottom in order: (The lower can override the same property in the higher.)

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

See more in the spec

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:

1. initialize the value array;
2. apply the values from 1st origin;
3. apply the values from 2st origin, override if the value exists;
4. ...
5. 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.

Assembly

Answer 8

In choosing what CSS styles to apply to an HTML element, specificity overrides generality according to a cascading set of rules that settle conflicts between styles:

1. Without CSS, the HTML will be displayed according to the browser’s default styles.
2. CSS tag selectors (matching the HTML tag) override browser defaults.
3. CSS class selectors (with .) override tag references.
4. CSS ID selectors (with #) override class references.
5. Inline CSS coded into an HTML tag override ID, class, and tag CSS.
6. Adding the !important value to a CSS style overrides everything else.
7. If CSS selectors are identical, the browser combines their properties. If the resulting CSS properties conflict, the browser chooses the property value that appeared later or most recently in the code.

A CSS selector that matches a more specific combination of tags, classes, and/or IDs will take priority. Of the following examples, the first will take precedence over the second, regardless of their order of appearance in the CSS:

ol#identity li.firstname { color: red; }
#identity .firstname { color: blue; }

Cultigen

Answer 9

Cascade and Specificity what you need to know:

1. CSS declaration marked with !important have the highest priority.

2. But only use !important as a last resource. It's better to use correct specificities- more maintainable code!

3. Inline styles will always have priority over styles in external stylesheets.

4. A selector that contains 1 ID is more specific than one with 1000 classes.

5. A selector that contains 1 class is more specific that one with 1000 elements.

6. The universal selector * has no specificity value(0,0,0)

7. Rely more on specificity than on the order of selectors.

8. But rely on order when using 3rd party stylesheets-always put your author stylesheet last.

Hargreaves