When you’re styling a website, you might run into a situation where multiple CSS rules target the same element. Which one wins? This is where understanding how CSS cascading works becomes essential.

We’re going to make this easy. No confusing tech-speak, just clear and real examples that make sense. If you’ve ever wondered why some CSS rules seem to win over others, this guide will clear it up.

What is the CSS Cascade?

The CSS cascade is the set of rules the browser follows to decide which style to apply when multiple rules target the same element.

“Cascade” refers to the way CSS “falls through” different sources of stylesheets and resolves conflicts by applying a hierarchy of priorities.

Sources of CSS

There are three main sources where CSS can come from:

1. Browser default styles — Every browser applies its own base styles.
2. User styles — Custom styles users can set in their browsers.
3. Author styles — Your CSS, which comes from external, internal, or inline styles.

When a conflict arises, the browser looks at where the style comes from and then evaluates how specific and important it is.

The Three Main Priority Layers

Let’s break down how CSS priority is decided, using these layers:

1. Importance (Important Wins)

If a CSS rule uses !important, it jumps to the front of the line:

p {
  color: blue !important;
}

This will override:

p {
  color: red;
}

Even if the red rule is more specific, !important wins. Use it sparingly. It can make debugging harder.

2. Specificity (More Specific Wins)

CSS assigns weight to selectors. The more specific a selector, the higher its priority.

Here’s a quick breakdown:

• Type selector: p = 1 point
• Class selector: .intro = 10 points
• ID selector: #main = 100 points
• Inline styles: 1000 points

Note- The “points” used here are not official CSS values — they’re just a simplified way to help you understand which selectors are stronger. Think of it like a scoring system to make it easier to grasp how the browser decides which rule to apply.

/* 10 points */
.intro {
  color: red;
}

/* 100 points */
#main {
  color: blue;
}

Even though .intro comes later in the file, #main is more specific. So, the element turns blue.

3. Source Order (Later Wins)

If specificity and importance are equal, the rule that appears last in the code wins.

p {
  color: green;
}

p {
  color: orange;
}

The paragraph will be orange.

Inline Styles Always Win (Mostly)

Inline styles written directly in HTML have the highest specificity (unless !important is used elsewhere).

<p style="color: purple;">Hello World</p>

This will override most external or internal styles.

Inheritance: Another Layer

Some CSS properties, like font-family or color, naturally inherit from parent elements.

If no rule is defined for an element, it might inherit from its parent:

body {
  color: black;
}

All text inside the body will default to black unless something else overrides it.

Putting It All Together

Here’s a simple example that combines all of the above:

<style>
  p {
    color: black;
  }
  .highlight {
    color: blue;
  }
  #special {
    color: green !important;
  }
</style>

<p id="special" class="highlight">This is a test.</p>

Which color will this paragraph be?

• p selector: 1 point
• .highlight: 10 points
• #special: 100 points + !important

Final result: green, because of the !important on the most specific selector.

Recap: How CSS Cascading Works

To quickly recap how CSS cascading works:

1. Importance: !important wins over everything.
2. Specificity: More specific selectors beat less specific ones.
3. Source order: If specificity is the same, the last rule wins.
4. Inline styles: Usually override external and internal styles.
5. Inheritance: Applies when no other rules are present.

Final Tips for Writing Maintainable CSS

• Avoid overusing !important.
• Be mindful of specificity when naming classes.
• Use consistent naming conventions like BEM (Block-Element-Modifier).
• Keep your CSS modular and organized.
• Always test in multiple browsers.

Conclusion

Understanding how CSS cascading works can save you tons of time and frustration. By mastering importance, specificity, and source order, you’ll write cleaner, more predictable styles.

Next time you’re wondering, “Why isn’t this style applying?” you’ll know exactly where to look.