Specificity, inheritance, and the cascade

When you build a website, you write many CSS rules. Sometimes two rules try to style the same HTML element in different ways.

For example, one rule might make all paragraphs gray, while another rule makes one special paragraph red. The browser needs a clear way to decide which rule wins.

That decision system is based on the cascade, specificity, inheritance, and rule order.

What the cascade means

The cascade is the system the browser uses to decide which CSS rule applies when rules conflict.

The browser looks at all matching rules and asks questions like:

• Is one rule marked as more important?
• Is one selector more specific?
• If the rules are equal, which one comes later?

<p class="intro">Welcome to my site!</p>

<style>
  p {
    color: blue;
  }

  .intro {
    color: green;
  }
</style>

The paragraph is green because .intro is more specific than p.

The cascade lets you write broad base styles first, then write more specific styles only where you need them.

Rule order: later rules can win

If two normal CSS rules have the same strength and target the same element, the rule written later wins.

<button class="button">Click me</button>

<style>
  .button {
    background-color: blue;
    color: white;
  }

  .button {
    background-color: red;
  }
</style>

The button is red because the second .button rule comes later.

This is useful when you load your own CSS after a library stylesheet. If your selector has the same strength, your later rule can win.

If a style is not showing up, check whether another rule later in the file is overriding it.

Specificity: some selectors are stronger

Specificity is the weight of a selector. A more specific selector usually wins over a less specific selector, even if the less specific selector appears later.

<h2 id="main-title" class="title">My article</h2>

<style>
  #main-title {
    color: blue;
  }

  .title {
    color: orange;
  }
</style>

The heading is blue because an ID selector is stronger than a class selector.

Try to keep selectors simple. Very strong selectors can become hard to override later.

A simple specificity scale

You do not need to memorize complex math. For beginners, this simple scale is enough:

• Element selectors like p, h1, and button are the weakest.
• Class selectors like .card and .nav-link are stronger.
• ID selectors like #header are stronger than classes.
• Inline styles written in HTML with style="" are stronger than normal stylesheet rules.

<div id="hero" class="banner">Hello</div>

<style>
  #hero {
    background-color: yellow;
  }

  .banner {
    background-color: blue;
  }
</style>

The background is yellow because #hero is stronger than .banner.

Use element selectors for basic defaults. Use class selectors for reusable styles. Use ID selectors rarely for styling because they are hard to override.

Avoid inline styles for normal page styling. They are useful in special cases, but they make CSS harder to manage.

Inheritance: some styles pass down

Inheritance means a parent element can pass some CSS properties to its children.

Text-related properties often inherit. Examples include color, font-family, and sometimes font-size.

<div class="card">
  <h2>Welcome</h2>
  <p>This is a <em>great</em> day.</p>
</div>

<style>
  .card {
    color: blue;
    font-family: Arial, sans-serif;
  }
</style>

The heading, paragraph, and em text all use blue text and the Arial font because they inherit those styles from .card.

A common use case is setting your main font on the body element.

Then most text on the page uses that font without repeating the rule everywhere.

When inheritance can confuse beginners

Not every CSS property inherits.

Text properties usually inherit. Layout and box properties usually do not.

<div class="message">
  <p>This paragraph is inside the box.</p>
</div>

<style>
  .message {
    border: 1px solid black;
    color: blue;
  }
</style>

The paragraph text becomes blue because color inherits.

But the paragraph does not get its own border. The border belongs to .message only.

This is a good thing. If borders inherited, every nested element would draw its own border and the page would quickly become messy.

Conflicting rules example

Here is a direct conflict where two rules target the same link.

<a href="#" id="special-link" class="nav-link">Home</a>

<style>
  .nav-link {
    color: green;
  }

  #special-link {
    color: deeppink;
  }
</style>

The link is pink because #special-link is an ID selector.

The .nav-link rule is valid, but a class selector is weaker than an ID selector.

What !important does

!important is a special keyword that makes one declaration jump ahead of normal declarations.

<p id="unique-text" class="text">Read this.</p>

<style>
  p.text {
    color: red !important;
  }

  #unique-text {
    color: blue;
  }
</style>

The paragraph is red because the red declaration uses !important.

Without !important, the ID selector would win.

When not to use !important

Do not use !important just because your CSS is not working.

It may fix the screen for a moment, but it often creates a harder problem later. If you need to override that rule again, you may feel forced to add another !important.

Before using it, check:

• Is another selector more specific?
• Is another rule written later?
• Can you use a clearer class instead?
• Can you remove an unnecessary ID selector?

When !important may be acceptable

There are rare cases where !important can be reasonable.

One example is a small utility class that must always do one job:

Another example is overriding third-party styles that you cannot edit.

Even then, use !important carefully and keep it isolated.

Common beginner mistakes

• Assuming rule order always wins. Specificity is checked before rule order for normal rules.
• Adding !important too quickly instead of finding the real conflict.
• Using heavy selectors like #main-nav ul li a.active for simple styles.
• Expecting every property to inherit. Borders, margins, padding, and backgrounds usually do not inherit.
• Using ID selectors for reusable styles. Classes are usually easier to maintain.

Mini task

Look at this HTML and CSS:

<h3 class="heading" style="color: blue;">News</h3>

<style>
  h3.heading {
    color: orange;
  }

  .heading {
    color: green;
  }
</style>

What color will the h3 be on the screen?

Answer: it will be blue because the inline style is stronger than normal stylesheet rules.

Short quiz

Question 1: Which selector is stronger: a class or an ID?

Answer: An ID selector is stronger than a class selector.

Question 2: If two class selectors target the same element and set different colors, which one wins?

Answer: If both selectors have the same strength, the one written later wins.

Question 3: Does the border property automatically inherit from a parent to a child?

Answer: No. Borders do not inherit by default.

Small challenge

This paragraph should have a red background, but it is currently green. Make the .alert rule stronger than #content p without using !important.

<div id="content">
  <p class="alert">Warning: Save your work!</p>
</div>

<style>
  #content p {
    background-color: green;
  }

  /* Fix this selector */
  .alert {
    background-color: red;
  }
</style>

One possible answer:

This wins because it combines an ID selector with a class selector, making it more specific than #content p.

Summary

• The cascade is how the browser decides which CSS rule wins.
• Rule order matters when matching rules have the same strength.
• Specificity is the weight of a selector.
• ID selectors are stronger than class selectors, and class selectors are stronger than element selectors.
• Inheritance passes some text styles from parents to children.
• !important forces a declaration ahead of normal rules, but it should be avoided most of the time.