Course contentsCascade, Specificity, and Inheritance · 16 topics

CSS Foundations

CSS Introduction Selectors and Relationships Cascade, Specificity, and Inheritance Values, Units, and Color

Layout Systems

The Box Model and Sizing Normal Flow, Display, and Positioning Flexbox CSS Grid

Applied CSS Systems

Backgrounds, Borders, and Visual Layers Interactive States and Pseudo-elements Overflow, Stacking Contexts, and Layering Transforms, Transitions, and Animation CSS Architecture, Components, and Maintenance

Responsive and Responsible CSS

Responsive Design and Container Queries Typography and Rhythm Motion, Focus, and Accessibility

CSS 58 min

Cascade, Specificity, and Inheritance

Predict which declaration wins instead of fighting the cascade with increasingly strong selectors.

The cascade resolves competing declarations using origin, importance, layer, specificity, and source order. Inheritance then carries selected properties, such as color and font, from parent to child. A clear layer order is more maintainable than scattered !important flags.

See the core pattern

Read this rule set from the outside in. Identify the inputs, the decision or transformation, and the result before changing it.

@layer reset, base, components, utilities;

@layer base {
  a { color: #617713; }
}
@layer components {
  .button { color: #10231f; }
}
@layer utilities {
  .muted { color: #64716d; }
}

Working rules

Inspect the computed style before adding an override
Keep selector specificity deliberately low
Define cascade layers from broad defaults to narrow utilities

A common mistake

Using !important as a default escape hatch hides the real ordering problem and makes later changes expensive.

Guided practice

Explain why a class selector normally overrides a type selector in the same origin and layer.

Copy the example into the editable notebook below.
Change one thing at a time and keep the program or rule valid.

Cascade, Specificity, and Inheritance Tutorial | SovranCode

CSS DEEP DIVE · ABOUT 30 MIN

Predict a winning declaration

Read the explanation, predict the visual result, then edit and run a complete example. Finish with a repair, an independent build, and a knowledge check.

Specificity is not the first decision

Before comparing selector weights, determine whether declarations apply and whether they occupy the same origin, importance, and layer. In normal author rules, a later declared layer takes precedence over an earlier one, even when the earlier layer uses a more specific selector. Normal unlayered author rules outrank normal layered author rules. Once the relevant cascade context is equal, compare ID selectors, then class-like selectors, then type-like selectors; source order breaks a remaining tie. Do not add an ID until you have inspected the winning declaration.

Inheritance fills gaps rather than defeating direct styles

If a paragraph has its own color declaration, that value does not compete by specificity with a color merely inherited from its parent. The direct declaration supplies the paragraph's value. Properties such as color normally inherit; margins normally do not. Use inherit deliberately when you want a property to take its parent's computed value. Important declarations reverse layer precedence, so turning every rule into !important creates a different ordering problem rather than a reliable architecture. Keep overrides intentional and inspect computed styles when the result surprises you.

Predict the notice color, then reverse the layer declaration order. Next add an unlayered .notice color and explain the new result.

Saved CSS practice

Edit the CSS inside the style element. Account work syncs; guest work stays on this device.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
@layer base, components;
@layer base {
  body { font: 1rem/1.7 system-ui; padding: 2rem; }
  main .notice { color: #b00020; }
}
@layer components {
  .notice { color: #164b96; border: 2px solid currentColor; padding: 1rem; }
}
</style>
</head>
<body>
<main><p class="notice">Which layer supplies this text color?</p><p>Compare this ordinary paragraph.</p></main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
@layer base, components;
@layer base {
  body { font: 1rem/1.7 system-ui; padding: 2rem; }
  main .notice { color: #b00020; }
}
@layer components {
  .notice { color: #164b96; border: 2px solid currentColor; padding: 1rem; }
}
</style>
</head>
<body>
<main><p class="notice">Which layer supplies this text color?</p><p>Compare this ordinary paragraph.</p></main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run in new window

Loading saved work…

Edit the CSS inside the style element and compare the result in the live preview. Your work saves automatically; you can also download a local copy.

DEBUGGING CHALLENGE

Find the faulty assumption

Explain the problem and write your repair before opening the solution.

@layer components { .notice { color: blue; } }
.notice { color: red; }

Reveal repair and explanation

@layer base, components;
@layer base { .notice { color: red; } }
@layer components { .notice { color: blue; } }

The original unlayered normal declaration outranks the layered normal declaration. Put the default in an earlier layer if the component should control the normal color.

INDEPENDENT LAB

Build it without copying

Create base and component layers for a notice. Write down the winning color for three conflicts before checking each in DevTools.

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Predict a winning declaration lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Predict a winning declaration</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Predict a winning declaration lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Predict a winning declaration</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Self-review checklist

Predictions account for layer order before specificity.An inherited parent color is distinguished from a direct child declaration.The final stylesheet uses no unnecessary !important declarations.

What did you test and change?

Loading saved work…

This lab is saved separately from the worked example. The checklist is a self-review, not an automatic grade.

CSS knowledge check

Answer both questions correctly to pass this lesson check. Account scores are recomputed on the server. This is a learning check, not certification.

1. For normal author declarations, which outranks a layered declaration?Any inherited valueAn unlayered declarationThe shortest selector

2. Two applicable normal rules share the same layer and specificity. What breaks the tie?The later declarationThe alphabetically earlier propertyThe shorter value

Loading saved work…