CSS Source Order Tutorial

Introduction

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

For example:

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

Both rules target paragraphs.

Both rules set the same property:

1color

So which colour should the browser use?

In this case, the paragraph becomes blue.

Why?

Because the second rule comes later in the CSS.

This is called source order.

Source order means that when two CSS declarations have equal strength, the declaration that appears later usually wins.

Source order is one part of the CSS cascade.

It explains why moving a rule lower in your stylesheet can sometimes change the final style on the page.

What Is Source Order in CSS?

Source order means the order in which CSS rules appear.

When two declarations apply to the same element, affect the same property, and have equal strength, the later declaration wins.

Example:

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

HTML:

1<p>This paragraph will be blue.</p>

The paragraph matches both rules.

The first rule says:

1color: black;

The second rule says:

1color: blue;

Because the second rule comes later, the paragraph becomes blue.

The earlier value is overridden.

Source Order Works When Selectors Are Equal

Source order is easiest to understand when the selectors are exactly the same.

Example:

1.button {2  background-color: gray;3}4 5.button {6  background-color: blue;7}

HTML:

1<button class=”button”>Save</button>

Both rules select the same button.

Both rules set the same property:

1background-color

The second rule comes later, so the button background becomes blue.

The first background value is ignored because a later competing value wins.

Source Order Works Per Property

Source order does not remove the whole earlier rule.

It only decides conflicts property by property.

Example:

1.card {2  color: black;3  padding: 20px;4}5 6.card {7  color: navy;8}

HTML:

1<div class=”card”>2  This is a card.3</div>

The final result is:

1color: navy;2padding: 20px;

The later rule overrides color.

But it does not override padding, because the later rule does not set padding.

The earlier padding still applies.

This is important.

CSS does not treat an earlier rule as completely cancelled.

It compares individual declarations.

Later Rules Can Override Earlier Rules

A later rule can override an earlier rule when both rules compete for the same element and the same property.

Example:

1.alert {2  color: red;3}4 5.alert {6  color: darkred;7}

HTML:

1<p class=”alert”>Please check your details.</p>

The paragraph becomes dark red.

The first rule applies.

Then the second rule also applies.

Because both selectors are the same, the later one wins for the color property.

Source Order with Multiple Properties

A CSS rule can contain several declarations.

Source order only matters where there is a direct conflict.

Example:

1.box {2  background-color: white;3  border: 1px solid gray;4  padding: 16px;5}6 7.box {8  background-color: lightblue;9  border-radius: 8px;10}

HTML:

1<div class=”box”>Content</div>

The final styles include:

1background-color: lightblue;2border: 1px solid gray;3padding: 16px;4border-radius: 8px;

The later rule overrides background-color.

The earlier border and padding still apply.

The later border-radius is added.

This is why CSS rules can be split across different parts of a stylesheet.

The browser combines all matching declarations, then uses the cascade to resolve conflicts.

Source Order with Classes

Source order also applies to class selectors.

Example:

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

HTML:

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

The paragraph becomes blue.

Both rules use the same selector.

Both rules set the same property.

The second rule comes later.

So the second rule wins.

Reversing the Order Changes the Result

If you reverse the order, the result changes.

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

Now the paragraph becomes green.

The selector did not change.

The HTML did not change.

Only the order changed.

That is source order.

Source Order with Two Different Classes

Source order can also matter when an element has multiple classes.

Example:

1.success {2  color: green;3}4 5.warning {6  color: orange;7}

HTML:

1<p class=”success warning”>Check your email.</p>

The paragraph has both classes.

It matches both .success and .warning.

Both selectors have the same specificity.

Both set color.

Because .warning appears later, the paragraph becomes orange.

Now reverse the CSS:

1.warning {2  color: orange;3}4 5.success {6  color: green;7}

The paragraph becomes green.

Again, the later rule wins because the selectors have equal specificity.

Source Order Does Not Always Win

Source order is important, but it does not beat everything.

A later rule does not automatically win if an earlier rule is more specific.

Example:

1.featured {2  color: purple;3}4 5p {6  color: black;7}

HTML:

1<p class=”featured”>Featured paragraph.</p>

The paragraph becomes purple.

Why?

Because .featured is more specific than p.

Even though the p rule comes later, it is weaker.

Source order usually decides the winner only when the competing declarations have equal specificity.

Specificity Comes Before Source Order

CSS does not simply pick the last rule every time.

It considers specificity first.

Example:

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

HTML:

1<div class=”card”>2  <p>This paragraph is inside a card.</p>3</div>

The paragraph becomes navy.

The selector .card p is more specific than p.

So the earlier rule wins.

The later p rule is too weak to override it.

A useful rule is:

1If specificity is different, the more specific selector usually wins.2If specificity is equal, the later rule usually wins.

Source Order with Equal Specificity

Here is an example where the selectors are different but have equal specificity:

1.notice {2  color: blue;3}4 5.warning {6  color: red;7}

HTML:

1<p class=”notice warning”>Read this message.</p>

Both selectors are class selectors.

Both have the same specificity.

Both apply to the paragraph.

Both set color.

The later rule wins.

So the text becomes red.

If the order changes:

1.warning {2  color: red;3}4 5.notice {6  color: blue;7}

The text becomes blue.

The HTML is the same.

The result changes because the CSS order changed.

Source Order Across CSS Files

Source order also applies across stylesheets.

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 background becomes navy.

This is why base styles usually come before theme styles.

A common stylesheet order is:

1reset styles2base styles3layout styles4component styles5utility styles6overrides

This structure allows later rules to adjust earlier general styles.

Source Order Inside the Same File

Most source order conflicts happen inside the same stylesheet.

Example:

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

The final h1 style is:

1font-size: 2rem;2color: navy;

The second rule overrides only the colour.

The first rule still provides the font size.

Source Order with Component Styles

Suppose you have a reusable card component.

1.card {2  padding: 20px;3  background-color: white;4  border: 1px solid #dddddd;5}6 7.card {8  background-color: #f5f8ff;9}

HTML:

1<article class=”card”>2  <h2>CSS Basics</h2>3  <p>Learn how CSS styles web pages.</p>4</article>

The card gets the later background colour.

The final result includes:

1padding: 20px;2background-color: #f5f8ff;3border: 1px solid #dddddd;

The later rule acts like an override.

This can be useful, but it can also become confusing if your stylesheet is not organised.

Source Order with Utility Classes

Utility classes are small classes that usually set one property.

Example:

1.text-blue {2  color: blue;3}4 5.text-red {6  color: red;7}

HTML:

1<p class=”text-blue text-red”>Important message</p>

The text becomes red.

This may feel surprising at first.

The order of classes in the HTML does not decide the winner.

This does not matter:

1<p class=”text-red text-blue”>Important message</p>

The result is still red if .text-red comes later in the CSS.

CSS source order is based on the order of the CSS rules, not the order of class names in the HTML.

HTML Class Order Does Not Control Source Order

This is a common mistake.

Example CSS:

1.large {2  font-size: 2rem;3}4 5.small {6  font-size: 0.875rem;7}

HTML:

1<p class=”small large”>Text</p>

The paragraph becomes small, not large.

Why?

Because .small appears later in the CSS.

The class order in HTML does not make .large stronger.

This version gives the same result:

1<p class=”large small”>Text</p>

The CSS order decides the conflict.

Source Order and Browser Developer Tools

Browser developer tools can help you see source order.

When a declaration is overridden, it is often crossed out.

Example:

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

In developer tools, you may see color: black; crossed out.

That means the browser found another declaration that wins.

The winning declaration is usually shown as active.

If both selectors have equal specificity, the active one is often the later one.

This makes developer tools useful for debugging CSS conflicts.

Source Order and the Cascade

Source order is part of the cascade.

The cascade is the system browsers use to decide which CSS declaration wins.

A simplified version is:

1importance2specificity3source order

For everyday CSS, source order matters most when specificity is tied.

Example:

1.button {2  color: white;3}4 5.button {6  color: black;7}

Both selectors are equal.

The later declaration wins.

But here:

1.primary-button {2  color: white;3}4 5button {6  color: black;7}

The class selector usually wins because it is more specific than the type selector.

Even if the type selector appears later, it does not automatically win.

Source Order with Shorthand Properties

Source order can be especially important with shorthand properties.

Example:

1.box {2  margin-top: 40px;3}4 5.box {6  margin: 0;7}

The final top margin is 0.

Why?

Because margin is a shorthand property.

It sets all four sides:

1margin-top2margin-right3margin-bottom4margin-left

So the later margin: 0; overrides the earlier margin-top: 40px;.

Now reverse the order:

1.box {2  margin: 0;3}4 5.box {6  margin-top: 40px;7}

The final top margin is 40px.

The later longhand property overrides the top part of the earlier shorthand.

Source Order with Borders

The same idea applies to borders.

Example:

1.card {2  border-color: blue;3}4 5.card {6  border: 1px solid gray;7}

The final border colour is gray.

The border shorthand sets border width, border style, and border colour.

Because it comes later, it overrides the earlier border-color.

Reverse the order:

1.card {2  border: 1px solid gray;3}4 5.card {6  border-color: blue;7}

Now the final border colour is blue.

This is why shorthand properties can accidentally override earlier longhand properties.

Source Order and Media Queries

Source order can also matter with media queries.

Example:

1.card {2  width: 100%;3}4 5@media (min-width: 700px) {6  .card {7    width: 50%;8  }9}

When the viewport is at least 700px wide, the card becomes 50%.

The media query rule comes later and applies only when its condition is true.

If the media query condition is false, the earlier rule remains.

Source order only matters among rules that actually apply.

Media Query Order Matters

This can become important when multiple media queries apply at the same time.

Example:

1.box {2  width: 100%;3}4 5@media (min-width: 600px) {6  .box {7    width: 75%;8  }9}10 11@media (min-width: 900px) {12  .box {13    width: 50%;14  }15}

At 950px, both media queries apply.

The 600px rule applies.

The 900px rule also applies.

Because the 900px rule comes later, the box becomes 50%.

This works well because the breakpoints go from smaller to larger.

If you reverse the media queries, you may get a different result.

Source Order with Hover Styles

Source order also affects pseudo-classes when specificity is equal.

Example:

1a:hover {2  color: red;3}4 5a:focus {6  color: blue;7}

If a link is both hovered and focused, both rules may apply.

Both selectors have similar specificity.

The later rule can win for the color property.

So the link may become blue.

To avoid confusion, you can combine states intentionally:

1a:hover,2a:focus-visible {3  color: blue;4}

This makes the intended behaviour clearer.

Source Order with Link States

Links have several pseudo-classes.

Common ones include:

1a:link2a:visited3a:hover4a:focus5a:active

Because some link states can overlap, order can matter.

A common pattern is:

1a:link {2  color: blue;3}4 5a:visited {6  color: purple;7}8 9a:hover,10a:focus-visible {11  text-decoration: underline;12}13 14a:active {15  color: red;16}

The exact design is up to you.

The important point is that link state rules can compete.

When they do, source order helps decide which declaration wins if specificity is equal.

Source Order and Overrides

Sometimes you intentionally write a later rule to override an earlier rule.

Example:

1.button {2  background-color: gray;3  color: white;4}5 6.button-primary {7  background-color: blue;8}

HTML:

1<button class=”button button-primary”>Save</button>

The button has both classes.

The base button class provides the shared styles.

The primary button class changes the background.

The final result is:

1background-color: blue;2color: white;

This is a useful pattern.

The base class gives common styling.

The modifier class changes one part.

Put General Rules Before Specific Rules

A good CSS structure usually puts general rules first.

Example:

1.button {2  padding: 10px 16px;3  border: 0;4  background-color: gray;5  color: white;6}7 8.button-primary {9  background-color: blue;10}11 12.button-danger {13  background-color: red;14}

HTML:

1<button class=”button button-primary”>Save</button>2<button class=”button button-danger”>Delete</button>

The general .button rule comes first.

The button variations come later.

This makes the cascade easier to understand.

Avoid Random Overrides

Source order is useful, but random overrides can make CSS hard to maintain.

This is harder to understand:

1.card {2  padding: 20px;3}4 5.title {6  color: navy;7}8 9.card {10  padding: 32px;11}12 13.button {14  background-color: blue;15}16 17.card {18  padding: 16px;19}

The .card padding changes several times.

The final value is 16px, but you have to read the whole stylesheet to know that.

A clearer version is:

1.card {2  padding: 16px;3}4 5.title {6  color: navy;7}8 9.button {10  background-color: blue;11}

Do not rely on source order when a single clear rule would be better.

Use Source Order Deliberately

Source order is not bad.

It is a normal part of CSS.

The key is to use it deliberately.

Good use:

1.button {2  background-color: gray;3}4 5.button-primary {6  background-color: blue;7}

Less clear use:

1.button {2  background-color: gray;3}4 5/* many unrelated rules here */6 7.button {8  background-color: blue;9}

The first version makes the relationship clearer.

The second version can be harder to debug.

Source Order and !important

The !important flag can override normal source order.

Example:

1.alert {2  color: red !important;3}4 5.alert {6  color: black;7}

The text remains red.

Even though color: black; comes later, the earlier declaration is marked !important.

It is usually better to avoid !important unless there is a strong reason.

It can make CSS harder to override later.

Use source order, specificity, and better organisation first.

Common Source Order Mistakes

A common mistake is thinking the last class in the HTML wins.

Example:

1<p class=”blue red”>Text</p>

The class red does not automatically win because it appears last in the HTML.

The CSS order decides:

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

In this case, the text becomes blue.

Another common mistake is forgetting that specificity can beat source order.

Example:

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

HTML:

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

The heading becomes green.

The ID selector is more specific, even though the class selector comes later.

How to Debug Source Order Problems

When a style does not apply, check these things:

1Does the selector match the element?2Is another rule setting the same property?3Is the other rule more specific?4Does the other rule come later?5Is !important involved?6Is the rule inside a media query?

Most source order problems come from a later rule overriding an earlier one.

Browser developer tools can show which declarations are active and which are crossed out.

That is usually the fastest way to find the conflict.

A Full Source Order Example

HTML:

1<p class=”message success”>2  Your profile was updated.3</p>

CSS:

1.message {2  color: black;3  font-weight: normal;4}5 6.success {7  color: green;8}9 10.message {11  font-weight: bold;12}

The paragraph matches all three rules.

The final result is:

1color: green;2font-weight: bold;

Why?

The first .message rule sets color and font-weight.

The .success rule sets color later, so it overrides the earlier colour.

The final .message rule sets font-weight later, so it overrides the earlier font weight.

Each property is resolved separately.

Another Full Example

HTML:

1<button class=”button primary”>2  Continue3</button>

CSS:

1.button {2  background-color: gray;3  color: white;4  padding: 12px 18px;5}6 7.primary {8  background-color: blue;9}10 11.button {12  padding: 16px 24px;13}

The final styles include:

1background-color: blue;2color: white;3padding: 16px 24px;

The .primary rule overrides the background colour.

The later .button rule overrides the padding.

The first .button rule still provides the text colour.

Best Practices for Source Order

Put broad rules before narrow rules.

Put base styles before component styles.

Put default component styles before component variations.

Keep related rules close together.

Avoid writing the same selector many times unless there is a clear reason.

Do not depend on HTML class order to control styling.

Use browser developer tools to inspect which declaration is winning.

Avoid !important for normal styling problems.

Quick Summary

Source order is the order in which CSS rules appear.

When two declarations have equal strength and affect the same property, the later declaration usually wins.

Source order works per property, not per whole rule.

The order of class names in HTML does not control which class wins.

Specificity usually matters before source order.

A more specific earlier selector can beat a less specific later selector.

Source order is useful when it is intentional and organised.

It becomes confusing when styles are scattered or repeatedly overwritten.

Understanding source order makes CSS easier to debug, easier to organise, and easier to control.