What does the “cascading” in CSS mean?


#1

Question

What does the “cascading” in CSS mean?

Answer

The “cascading” in CSS refers to the fact that styling rules “cascade” down from several sources. This means that CSS has an inherent hierarchy and styles of a higher precedence will overwrite rules of a lower precedence.

For deeper explanations, please read the comments below.


FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Intro to CSS
#2

“styles of a higher precedence will overwrite rules of a lower precedence.”
plz elaborate and explain


#3

Picture a newly created element node that is nested within parent and grandparent elements. This node type will be HTMLElement. Every node can be seen to have a property sheet much like how a plain object has attributes and methods. At time of creation it is first populated with attributes inherited from its parent elements.

Now picture all the properties as being huge wall of pigeon hole bins, each bin representing a specific property, such as color or font-face or border, etc. Once the parent node inheritable properties have been distributed we turn to the style sheet. Think of each selector rule as being a separate package and give it to a runner who distributes all the properties in the pigeon holes. When a particular slot has a card in it that has equal or lower importance, it gets swapped out with the new one that just arrived, otherwise the new one is disposed of. Repeat this process with each selector and we see that last rule in is the one that applies.

Cascade refers only to rules we write directly to a node, not those that are inherited. Selectors are declarative and absolute. The order in which they appear in the style sheet has a bearing on how they will apply. That’s where importance comes in. As we said above, if the runner brings a rule with greater or equal importance, the new rule takes the place of the old one. The “equal” in that statement is important to understand, as that is when the last property declaration in as the one that applies is not tied to importance, only timing.


#4

@meghataunk you’ll see this in action yourself in our CSS course, that’ll likely be the best way to understand this on a deeper level. Roy’s description of how this works should prove to be very enlightening once you see a little more about how this works yourself, so if you don’t quite get it yet, bookmark Roy’s answer and come back later once you’ve seen some more examples.

For an illustrative analogy (and CSS doesn’t work this way per se but might help you as a beginner) imagine if I told a freelance designer that I’d just hired that I had some rules for the color of the headers in the design that I want. Those are:

  • make the first header red
  • make the second header yellow
  • make all headers blue
  • make the third header green

These instructions conflict, so my designer might be confused and come back to me to ask for clarification. Which one takes priority? So let’s say that instead, I give the designer a sense of which instructions come first.

  1. make the first header red
  2. make the second header yellow
  3. make all headers blue
  4. make the third header green

Think of these as ranked in order of priority, so the higher listed things have a greater precedence and overrule those of a lower precedence (a “cascade”). Thus, despite the third instruction saying make all headers blue, the top ranked instruction is to make the first header red, so the first header will be colored red. In this analogy, the first header would be red, the second yellow, and all other headers would be blue. The fourth rule, to make the third header green, is overwritten by the third rule, which has a greater rank or precedence.

To think of it another way, think of how the Supreme Court can overrule the judgment of the Appeals Courts beneath it, which can overrule the judgment of District Courts beneath them, and so on and so forth.

Note that these analogies aren’t actually how CSS works! Roy’s answer is way better for the details. CSS decides what takes priority based in part on how specific those rules are (for example, the fourth rule above was more specific than the third, talking about a particular header) and if you have other instructions like !important – listen to this rule first no matter what. CSS doesn’t come with an ordered list quite like my imaginary designer instructions. Just take this as an analogy to understand how some rules override other rules.


#5

Thanks! @oduffy i have got a clear picture of my problem statement with your answer. Also, thanks to @mtf for helping with the querry.


#6

“The “cascading” in CSS refers to the fact that styling rules “cascade” down from several sources. This means that CSS has an inherent hierarchy and styles of a higher precedence will overwrite rules of a lower precedence.”

I second meghataunk-- you guys are really awesome at answering questions. This helped me understand CSS a bit better. I just need one clarification: which has higher precedence, an inline style put directly into index.html or one given by the style.css? (Assuming they are attempting to style the same element.)


#7

The inline, by far. The only thing with higher importance is !important on a CSS property declaration.

Inline style attributes have the highest specificity. 1 0 0 0. That’s not a number, but the values that would appear in the specificity table for that CSS rule.

style="color: maroon"

Nothing in the style sheet can override that except,

color: red !important;

A specificity table is where we can enter a count of the selectors and their importance…

style  id  class  type

As we can see, type is the lowest when ranked from the right. A type selector has specificity, 0 0 0 1. This also applies to pseudo-elements (:before, :after, etc.).

A class selector overrides any type selector, regardless the count in that column. A 1 in the class column gives authority to override conflicting rules in the type column. Same applies with an id selector. A 1 in that column means it will override as necessary any selector rules laid down previously. Then it comes to the inline style attribute. That’s the kicker that can make one’s day, figuratively speaking. When the only cure is !important then we know there is an inline style rule somewhere that is evading us.

Type vs Type Cascade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>type vs type</title>
<style>
div p {
  color: red;
}
p {
  color: blue;
}
</style>
</head>
<body>
  <p style="color: green">This color rules!</p>
  <div>
    <p>Color me red.</p>
  </div>
  <p>Does this change color?</p>
</body>
</html>

Now substitute with this…

p {
  color: blue !important;
}

#8

This was helpful and I appreciate. Thank you all.


#9

Essentially CSS is all about rank (higher precedence). Like say in my family, there are some rules right? So if the parent has said one thing, and my sibling says another. I will go with what my parent said over what my sibling said. :slightly_smiling_face:


#10

Thank You Soo Much Sir.!!


#12

This was the best answer for a beginner, in my opinion…I love it when people come with their relatable analogies. Thanks!


#13

this was an informative post