Understanding the CSS Cascade Tutorial

Introduction

CSS often has more than one rule that could apply to the same element.

For example:

1p {2  color: black;3}4 5.intro {6  color: navy;7}

HTML:

1<p class=”intro”>Welcome to the page.</p>

Both rules apply to the paragraph.

The paragraph is a <p> element.

It also has class="intro".

So which colour should the browser use?

That decision is made by the CSS cascade.

The cascade is the system CSS uses to decide which declarations win when multiple declarations apply to the same element.

Understanding the cascade helps explain why some styles work, why other styles are crossed out in browser developer tools, and why CSS sometimes behaves differently from what you expected.

What Is the CSS Cascade?

The CSS cascade is the decision-making process the browser uses when more than one CSS declaration could apply to the same element and property.

For example:

1p {2  color: black;3}4 5p {6  color: blue;7}

Both rules target paragraphs.

Both set the color property.

The browser must choose one value.

In this simple case, the later rule usually wins:

1p {2  color: blue;3}

The paragraph becomes blue.

This is the cascade in action.

Why CSS Needs a Cascade

CSS can come from several places.

For example, a page can have:

1browser default styles2external stylesheets3internal style elements4inline styles5CSS from frameworks6CSS from components7CSS from user settings

Several rules may target the same element.

Example:

1body {2  color: #222222;3}4 5p {6  color: #333333;7}8 9.intro {10  color: navy;11}

If a paragraph has class="intro", all of these may be relevant.

The cascade provides rules for deciding the final value.

Without the cascade, the browser would not know which style to apply.

A Simple Cascade Example

HTML:

1<p class=”intro”>This is the introduction.</p>

CSS:

1p {2  color: black;3}4 5.intro {6  color: navy;7}

The paragraph matches both selectors.

The p selector says the text should be black.

The .intro selector says the text should be navy.

The paragraph becomes navy because .intro is more specific than p.

This is one of the main cascade rules:

1more specific selectors can override less specific selectors

The Main Factors in the Cascade

When CSS declarations compete, the browser considers several factors.

The main ones are:

1origin and importance2specificity3source order4inheritance

For most everyday CSS, the three most important ideas are:

1specificity2order3inheritance

You do not need to master every advanced cascade detail immediately.

Start by understanding why one selector wins over another.

Browser Default Styles

Before your CSS is applied, browsers already have default styles.

These are called user agent styles.

For example, browsers usually make headings large and bold:

1<h1>Page Title</h1>

They usually give paragraphs margin:

1<p>This is a paragraph.</p>

They usually make links blue and underlined:

1<a href=”about.html”>About</a>

These styles come from the browser.

Your CSS can override them.

For example:

1a {2  color: darkgreen;3  text-decoration: none;4}

This changes the browser’s default link styling.

Author Styles

Author styles are the styles written by the website author.

That usually means your CSS.

Example:

1body {2  font-family: Arial, sans-serif;3}4 5h1 {6  color: navy;7}8 9p {10  line-height: 1.6;11}

Author styles usually override browser default styles when they target the same property.

For example, if the browser gives <h1> a default size, you can write:

1h1 {2  font-size: 2rem;3}

Your rule becomes the author rule for that heading size.

Source Order

Source order means that later rules can override earlier rules when they have equal strength.

Example:

1p {2  color: black;3}4 5p {6  color: blue;7}

Both selectors are the same.

Both set the same property.

The second rule comes later, so the paragraph becomes blue.

This is source order.

A simple rule is:

1when specificity is equal, the later rule wins

Source Order Example with Classes

HTML:

1<p class=”message”>Your settings were saved.</p>

CSS:

1.message {2  color: green;3}4 5.message {6  color: blue;7}

Both rules use the same selector.

Both have the same specificity.

The second rule comes later, so the message becomes blue.

If you reverse the order:

1.message {2  color: blue;3}4 5.message {6  color: green;7}

the message becomes green.

Order matters when competing selectors are equally specific.

Stylesheet Order

Source order also applies across multiple CSS files.

Example:

1<link rel=”stylesheet” href=”base.css”>2<link rel=”stylesheet” href=”theme.css”>

If both files contain a rule for the same selector and property, the later file can win.

base.css:

1button {2  background-color: white;3}

theme.css:

1button {2  background-color: navy;3}

Because theme.css is loaded after base.css, the button may become navy.

This is why resets and base styles usually load before main styles.

Specificity

Specificity is how strong a selector is.

When two selectors target the same element and property, the more specific selector usually wins.

Example:

1p {2  color: black;3}4 5.intro {6  color: navy;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph becomes navy because .intro is more specific than p.

A class selector is stronger than a type selector.

Specificity Basics

A simple specificity order is:

1type selector2class selector3ID selector4inline style

From weaker to stronger:

1p

1.intro

1#main-intro

1<p style=”color: red;”>

This is simplified, but it explains many common CSS conflicts.

The stronger selector can win even if it appears earlier.

Type Selector Specificity

A type selector targets an HTML element by tag name.

Example:

1p {2  color: black;3}

This selects all <p> elements.

Type selectors have low specificity.

They are useful for broad base styles.

Example:

1body {2  font-family: Arial, sans-serif;3}4 5p {6  line-height: 1.6;7}

Because they are low specificity, they are usually easy to override with classes.

Class Selector Specificity

A class selector targets elements with a specific class.

Example:

1.highlight {2  color: blue;3}

HTML:

1<p class=”highlight”>Important text.</p>

Class selectors are more specific than type selectors.

Example:

1p {2  color: black;3}4 5.highlight {6  color: blue;7}

The paragraph becomes blue because .highlight is more specific than p.

Classes are usually the best choice for reusable styling.

ID Selector Specificity

An ID selector targets an element with a specific ID.

Example:

1#main-title {2  color: green;3}

HTML:

1<h1 id=”main-title” class=”page-title”>Welcome</h1>

ID selectors are more specific than class selectors.

Example:

1.page-title {2  color: navy;3}4 5#main-title {6  color: green;7}

The heading becomes green because the ID selector is more specific.

IDs are powerful.

Use them carefully, because they can make styles harder to override later.

Inline Styles

Inline styles are written directly inside the HTML element using the style attribute.

Example:

1<p style=”color: red;”>This paragraph is red.</p>

Inline styles are usually stronger than normal stylesheet rules.

Example:

1<p class=”intro” style=”color: red;”>Welcome.</p>

CSS:

1.intro {2  color: navy;3}

The paragraph becomes red because the inline style is stronger.

For normal websites, avoid inline styles unless there is a specific reason.

They can make CSS harder to maintain.

Specificity Example

HTML:

1<p id=”main-intro” class=”intro”>Welcome to the page.</p>

CSS:

1p {2  color: black;3}4 5.intro {6  color: navy;7}8 9#main-intro {10  color: green;11}

All three rules apply to the paragraph.

The type selector says black.

The class selector says navy.

The ID selector says green.

The paragraph becomes green because the ID selector has the highest specificity.

Specificity and Source Order Together

Specificity usually matters before source order.

Example:

1.intro {2  color: navy;3}4 5p {6  color: black;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph becomes navy, even though the p rule comes later.

Why?

Because .intro is more specific than p.

Source order decides the winner only when specificity is equal or when other cascade factors allow it.

When Later Rules Win

If specificity is the same, the later rule wins.

Example:

1.intro {2  color: navy;3}4 5.intro {6  color: green;7}

HTML:

1<p class=”intro”>Welcome.</p>

Both rules use .intro.

They have equal specificity.

The second rule comes later, so the text becomes green.

This is why the order of your CSS matters.

Inheritance

Some CSS properties are inherited.

Inheritance means a child element can receive a property value from its parent.

Example:

1body {2  color: #333333;3  font-family: Arial, sans-serif;4}

HTML:

1<body>2  <p>This paragraph inherits text colour and font family.</p>3</body>

The paragraph can inherit color and font-family from the body.

This is useful because you can set general text styles once on a parent element.

Inherited vs Directly Applied Styles

Inherited styles are weaker than styles directly applied to an element.

Example:

1body {2  color: black;3}4 5p {6  color: navy;7}

HTML:

1<p>This paragraph is navy.</p>

The paragraph inherits black from body, but it also has a direct p rule setting navy.

The direct rule wins.

Inheritance provides a default value.

Direct styles override inherited values.

Properties That Commonly Inherit

Text-related properties often inherit.

Common examples include:

1color2font-family3font-size4font-weight5line-height6text-align7visibility

For example:

1body {2  font-family: Arial, sans-serif;3  line-height: 1.6;4}

Many child elements can inherit these text styles.

This is why setting base typography on the body is common.

Properties That Usually Do Not Inherit

Many layout and box model properties do not inherit.

Examples include:

1margin2padding3border4width5height6background-color7display8position

For example:

1section {2  padding: 24px;3}

A paragraph inside the section does not automatically inherit that padding.

The padding belongs to the section.

This is usually what you want.

The inherit Keyword

You can force a property to inherit using the inherit keyword.

Example:

1button {2  font: inherit;3}

This tells buttons to inherit font settings from their parent.

This is often useful because form controls may use browser or operating system fonts by default.

Another example:

1a {2  color: inherit;3}

This makes links use the same text colour as their parent.

Use inherit when you deliberately want a property to come from the parent.

The initial Keyword

The initial keyword resets a property to its initial value.

Example:

1p {2  color: initial;3}

This does not necessarily mean “browser default styling for paragraphs”.

It means the property’s initial CSS value.

For simple learning projects, you will use initial less often than normal values or inherit.

Still, it is useful to know that CSS has keywords for resetting and controlling values.

The unset Keyword

The unset keyword behaves differently depending on whether the property normally inherits.

If the property is inherited, unset acts like inherit.

If the property is not inherited, unset acts like initial.

Example:

1.example {2  color: unset;3  margin: unset;4}

color normally inherits, so it behaves like inherited colour.

margin does not normally inherit, so it resets toward its initial value.

This is more advanced, but useful when resetting styles.

The revert Keyword

The revert keyword rolls a property back to the value it would have had from a previous cascade origin.

For example, it can be used to move away from author styles and back toward browser defaults.

Example:

1button {2  all: revert;3}

This is an advanced reset-style technique.

You do not need it for most basic styling.

For now, focus mainly on specificity, order, and inheritance.

!important

The !important flag gives a declaration extra priority.

Example:

1p {2  color: red !important;3}

This can override normal declarations that would otherwise win.

Example:

1p {2  color: red !important;3}4 5.intro {6  color: navy;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph may become red because the p rule is marked !important.

Use !important sparingly.

It can make CSS harder to maintain.

Why !important Can Cause Problems

The problem with !important is that it bypasses normal expectations.

Example:

1.button {2  background-color: navy !important;3}4 5.button-secondary {6  background-color: white;7}

HTML:

1<button class=”button button-secondary”>Cancel</button>

You may expect .button-secondary to make the button white.

But .button has !important, so it may still stay navy.

Then you may be tempted to write another !important rule.

This can become difficult to manage.

A better approach is usually to improve selector structure and order.

Avoiding !important

Instead of using !important, try:

1using a clearer class2placing override rules later3reducing overly specific selectors4avoiding unnecessary IDs5organising CSS in layers or sections6using component classes

Less ideal:

1.card p {2  color: navy !important;3}

Better:

1.card-text {2  color: navy;3}

HTML:

1<p class=”card-text”>Card paragraph.</p>

Clear classes often reduce the need for !important.

Cascade Layers

CSS also supports cascade layers with @layer.

Layers let you organise CSS into named levels.

Example:

1@layer reset, base, components;2 3@layer reset {4  * {5    box-sizing: border-box;6  }7}8 9@layer base {10  body {11    font-family: Arial, sans-serif;12  }13}14 15@layer components {16  .button {17    padding: 10px 16px;18  }19}

Cascade layers are useful for larger projects and design systems.

They help control which groups of CSS should win.

For a first understanding of the cascade, focus on specificity and order first.

Layers can be learned after the basic cascade feels clear.

A Practical Button Example

HTML:

1<button class=”button button-primary”>Save</button>2<button class=”button button-secondary”>Cancel</button>

CSS:

1.button {2  padding: 10px 16px;3  border: 1px solid #333333;4}5 6.button-primary {7  background-color: navy;8  color: white;9}10 11.button-secondary {12  background-color: white;13  color: navy;14}

Here, .button provides shared styles.

.button-primary and .button-secondary provide variations.

This avoids fighting the cascade.

The CSS is organised so general styles come first and specific variations come after.

A Practical Heading Example

HTML:

1<h1 class=”page-title”>Welcome</h1>

CSS:

1h1 {2  font-size: 2rem;3  color: black;4}5 6.page-title {7  color: navy;8}

The heading uses the h1 font size.

The colour becomes navy because .page-title is more specific than h1.

This is a common pattern:

1element selector for base styling2class selector for more specific styling

A Practical Layout Example

HTML:

1<main class=”container wide-container”>2  <p>Page content.</p>3</main>

CSS:

1.container {2  width: 90%;3  max-width: 900px;4  margin: 0 auto;5}6 7.wide-container {8  max-width: 1200px;9}

Both classes apply to the same element.

Both set max-width.

The .wide-container rule comes later and has equal specificity, so it wins.

The main element uses max-width: 1200px.

This is a clean cascade pattern.

A Complete Example

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>CSS Cascade Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <main class=”container”>11    <h1 id=”main-title” class=”page-title”>Understanding the CSS Cascade</h1>12 13    <p class=”intro”>14      The cascade decides which CSS rule wins when several rules apply.15    </p>16 17    <article class=”card featured-card”>18      <h2>Featured Lesson</h2>19      <p class=”card-text”>20        Specificity, order, and inheritance are key parts of the cascade.21      </p>22      <a href=”lesson.html”>Read more</a>23    </article>24 25    <button class=”button button-primary”>Start Learning</button>26  </main>27 28</body>29</html>

CSS:

1/* Broad inherited styles */2body {3  font-family: Arial, sans-serif;4  line-height: 1.6;5  color: #222222;6}7 8/* Type selector */9h1 {10  color: black;11}12 13/* Class selector */14.page-title {15  color: navy;16}17 18/* ID selector */19#main-title {20  font-size: 2.5rem;21}22 23/* Layout */24.container {25  width: 90%;26  max-width: 900px;27  margin: 0 auto;28}29 30/* Component base */31.card {32  padding: 24px;33  border: 1px solid #dddddd;34}35 36/* Component variation */37.featured-card {38  border-color: navy;39}40 41/* Text inside cards */42.card-text {43  color: #333333;44}45 46/* Button base */47.button {48  padding: 10px 16px;49  border: 1px solid #333333;50}51 52/* Button variation */53.button-primary {54  background-color: navy;55  color: white;56}

This example uses inheritance, specificity, and source order together.

How the Complete Example Works

The body rule sets inherited text styles:

1body {2  font-family: Arial, sans-serif;3  line-height: 1.6;4  color: #222222;5}

Many child elements can inherit these values.

The h1 rule sets a base heading colour:

1h1 {2  color: black;3}

The .page-title rule overrides the heading colour:

1.page-title {2  color: navy;3}

The #main-title rule sets the heading size:

1#main-title {2  font-size: 2.5rem;3}

The .card rule gives all cards shared styles:

1.card {2  padding: 24px;3  border: 1px solid #dddddd;4}

The .featured-card rule changes the border colour:

1.featured-card {2  border-color: navy;3}

This works cleanly because the CSS moves from general styles to more specific variations.

How to Debug Cascade Problems

If a style does not apply, use browser developer tools.

Inspect the element and check:

1which rules apply2which declarations are crossed out3which selector is more specific4which rule appears later5whether the property is inherited6whether an inline style is overriding it7whether !important is involved

Crossed-out CSS is useful.

It usually means the browser found the declaration, but another declaration won.

Do not guess.

Inspect the element and check the active rule.

Common Mistake: Thinking the Last Rule Always Wins

The last rule wins only when specificity and other cascade factors allow it.

Example:

1.intro {2  color: navy;3}4 5p {6  color: black;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph becomes navy, not black.

The .intro selector is more specific than p.

Source order does not beat higher specificity in this case.

Common Mistake: Overusing ID Selectors

ID selectors are very specific.

Example:

1#site-header {2  background-color: navy;3}

This can be hard to override later.

For styling, classes are often more flexible:

1.site-header {2  background-color: navy;3}

Use IDs when you need unique page anchors or JavaScript targets.

Use classes for most reusable styling.

Common Mistake: Using Inline Styles Too Often

Inline styles can override normal stylesheet rules.

Example:

1<p class=”intro” style=”color: red;”>Welcome.</p>

CSS:

1.intro {2  color: navy;3}

The paragraph becomes red.

If inline styles are used often, your stylesheet becomes harder to manage.

For normal styling, put CSS in a stylesheet and use classes.

Common Mistake: Reaching for !important Too Quickly

This can work:

1.intro {2  color: navy !important;3}

But it can create future problems.

If you need to override it later, you may need another !important rule.

Before using !important, check:

1Can I use a better class?2Can I move the rule later?3Can I reduce the specificity of another rule?4Can I avoid an ID selector?5Can I simplify the CSS?

Use !important only when there is a clear reason.

Common Mistake: Forgetting About Inheritance

This CSS sets colour on the body:

1body {2  color: #333333;3}

Paragraphs may inherit that colour.

If a paragraph has no direct colour rule, it uses the inherited value.

But if you add:

1p {2  color: navy;3}

then paragraphs use navy instead.

When debugging, check whether a property is directly applied or inherited.

Common Mistake: Loading Stylesheets in the Wrong Order

Less useful:

1<link rel=”stylesheet” href=”theme.css”>2<link rel=”stylesheet” href=”reset.css”>

The reset may override some theme styles because it loads later.

Better:

1<link rel=”stylesheet” href=”reset.css”>2<link rel=”stylesheet” href=”theme.css”>

Load broad foundation styles first.

Load more specific design styles after.

Common Mistake: Making Selectors Too Specific

This is hard to override:

1body main .container article.card p.card-text {2  color: navy;3}

A simpler selector is usually better:

1.card-text {2  color: navy;3}

Overly specific selectors can make the cascade harder to work with.

Use the simplest selector that clearly targets the element.

Common Mistake: Not Checking Crossed-Out Rules

In browser developer tools, a crossed-out declaration is important.

It tells you that the rule exists but is not winning.

For example:

1p {2  color: black;3}

may be crossed out because this rule wins:

1.intro {2  color: navy;3}

A crossed-out rule is evidence.

Use it to understand the cascade instead of rewriting CSS randomly.

Best Practices

Use broad type selectors for base styles.

Use classes for reusable component styles.

Avoid unnecessary ID selectors for styling.

Avoid inline styles for normal website styling.

Use !important sparingly.

Put general styles before specific styles.

Load reset or base styles before component and theme styles.

Use source order intentionally.

Keep selectors as simple as possible.

Use inheritance for text styles such as font and colour.

Use browser developer tools to inspect which rules win.

When CSS does not work, check specificity, order, inheritance, inline styles, and !important.

Summary

The CSS cascade decides which rule wins when multiple declarations apply to the same element and property.

For example:

1p {2  color: black;3}4 5.intro {6  color: navy;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph becomes navy because .intro is more specific than p.

The main cascade ideas are:

1specificity decides which selector is stronger2source order decides when specificity is equal3inheritance passes some values from parent to child4inline styles are stronger than normal stylesheet rules5!important can override normal cascade behaviour

The main idea is simple:

1When more than one CSS rule applies, the cascade decides the winner.

Once you understand the cascade, CSS becomes easier to debug, organise, and control.