Cascade, Specificity and Inheritance

What Is It?

The cascade chooses a winning declaration. For ordinary author rules in the same layer, importance is considered before specificity; source order breaks ties. Inheritance passes some values, such as color, from parent to child.

Properties, Tags and Attributes Explained

• specificity: ID selectors outweigh classes; classes outweigh element selectors when other cascade factors tie.
• inherit: Explicitly takes the parent computed value.
• !important: Changes declaration priority; avoid using it as a routine fix.
• source order: A later declaration wins when competing declarations have equal cascade priority and specificity.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Specificity wins

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cascade, Specificity and Inheritance</title>
  <style>
    p { color: #b91c1c; }
    .message { color: #15803d; }
    p { color: #1d4ed8; }
  </style>
</head>
<body>
  <p class="message">Which color wins?</p>
</body>
</html>

What you see: Green wins: the class selector is more specific than either p selector.

Example 2: Inheritance and ties

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cascade, Specificity and Inheritance</title>
  <style>
    .panel { color: #7c3aed; }
    .note { color: #b91c1c; }
    .note { color: #1d4ed8; }
  </style>
</head>
<body>
  <div class="panel"><p>Inherited purple</p><p class="note">Later blue declaration</p></div>
</body>
</html>

What you see: The first paragraph inherits purple; the second uses the later class rule.

When and Where to Use It

Use browser DevTools when a rule appears crossed out or an unexpected inherited value appears.

Common Mistake or Useful Tip

Margin, padding, and border are not inherited by default. Inline styles, layers, animations, and important rules add further cascade steps.

Try It Yourself

Remove the message class and predict which color wins.