How CSS Cascades

💡 The Concept

When a browser loads a web page, it may find dozens of CSS rules all targeting the same element. Which one wins? That question is answered by the cascade: the system CSS uses to decide which styles get applied. Understanding the cascade is one of the most useful things you can learn, because it explains why your styles sometimes work and sometimes do not.

What Does “Cascading” Mean?

The word “cascading” is the key to understanding how CSS works, and it is also where beginners often get confused. Think of it like a waterfall.

A cascade is a small waterfall flowing down a rocky slope. The water does not follow a single path — it branches out and finds many routes to the bottom. CSS works the same way. When a browser renders a web page, it cascades through all the style rules it can find — from multiple stylesheets, inline styles, and even default browser styles — and follows a specific set of rules to decide which styles actually get displayed.

In a simple project, you might have just one stylesheet. But a real-world business website can easily have ten or more stylesheets all applying styles to the same page. The browser needs to sort through all of them and determine which rules win. Understanding this cascade is essential to writing CSS that behaves the way you expect.

How the Browser Decides: Specificity

When two CSS rules target the same element, the browser uses a concept called specificity to decide which one wins. Think of it as a score: the more precisely a rule targets a specific element, the higher its priority.

Here is the basic order from lowest to highest priority:

• Browser default styles — every browser has built-in styles that apply before any of your CSS
• External or internal stylesheet rules — your CSS file or a <style> block in the HTML
• Inline styles — written directly on an HTML tag using the style attribute (highest priority)

So an inline style always beats a stylesheet rule targeting the same property. You will see this in action in the exercise below.

🎬 Video Demonstration

In this video I demonstrate how the browser looks at conflicting CSS and decides what to display:

Exercise: Try It Yourself

Step 1. Open JSFiddle.net.

Step 2. In the HTML panel, paste this code:

<div style="background-color: gray">
  <h1 style="background-color: green">Which style wins?</h1>
</div>

Step 3. Click Run. The <div> says the background should be gray. The <h1> inside says the background should be green. Which one wins for the heading?

Notice that text color inherits from the parent while background color does not. This is another key part of how the cascade works.

The more specific CSS wins! Since the style attribute on the <h1> is more specific to that element than the style on the parent <div>, the heading gets a green background. The gray background still applies to the rest of the <div>.

When you are working on small projects, CSS conflicts are rare. But on larger websites with multiple stylesheets, managing the cascade and making your CSS win becomes both the challenge and the fun of the job. If you want to go deeper, the Mozilla article on Cascading is an excellent resource.

❓ Frequently Asked Questions

★ Key Takeaways

CSS does not apply styles randomly. This lesson explained the cascade: the set of rules that determines which style wins when there are conflicts. Next, you will learn three different ways to add CSS to a web page. Each method has its own purpose, and knowing all three gives you flexibility as a developer.

← Back to CSS Fundamentals Lessons

← Back to All Lessons