Cascade Layers and Global Keywords

What Is It?

Cascade layers give named groups of styles an explicit priority order. Global keywords let a declaration inherit, reset, or step back in the cascade.

Properties, Tags and Attributes Explained

• @layer: Declares layer order and groups rules. Later layers outrank earlier layers for normal declarations.
• initial: Uses the property specification initial value.
• inherit: Uses the parent computed value.
• unset: Acts like inherit for inherited properties and initial otherwise.
• revert / revert-layer: Roll back to an earlier cascade origin or layer, respectively.
• all: Sets nearly all properties at once; excludes custom properties, direction, and unicode-bidi.

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: Layer priority

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cascade Layers and Global Keywords</title>
  <style>
    @layer base, components;
    @layer base { #message { color: #b91c1c; } }
    @layer components { p { color: #15803d; } }
  </style>
</head>
<body>
  <p id="message">The later normal layer wins.</p>
</body>
</html>

What you see: Green wins even though the earlier layer used an ID selector.

Example 2: Reset or inherit

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cascade Layers and Global Keywords</title>
  <style>
    .demo { color: #7c3aed; }
    .reset { color: initial; }
    .keep { color: inherit; border: 1px solid; padding: 8px; }
  </style>
</head>
<body>
  <div class="demo"><p>Inherited purple</p><p class="reset">Initial text color</p><p class="keep">Explicitly inherited purple</p></div>
</body>
</html>

What you see: The reset paragraph uses the initial color; the others follow their parent.

Example 3: Reset selected component styles with all

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cascade Layers and Global Keywords</title>
  <style>
    .box { color: #7c3aed; }
    .reset { all: unset; display: block; padding: 12px; border: 1px solid currentColor; }
  </style>
</head>
<body>
  <div class="box"><p class="reset">Inherited color survives unset; non-inherited presentation is reset.</p></div>
</body>
</html>

What you see: all: unset resets non-inherited properties while inherited color follows the parent. Use broad resets deliberately on controlled components, restoring required display and focus behavior.

When and Where to Use It

Use layers to organize resets, vendor rules, components, and overrides in a predictable order.

Common Mistake or Useful Tip

Normal unlayered rules outrank normal layered rules. Important declarations reverse layer priority, so do not apply the normal-layer rule to important declarations.

Try It Yourself

Swap the declared layer order and predict the winning color.