Override a token inside a component

Change the accent only for the alert card variant.

Official sourceW3C CSS Custom Properties — inheritance and cascadeReviewed: 2026-08-26

STEP 1 · LEARN

How it works

Custom properties inherit by default. A closer value in the tree can override the token for a component and its descendants without duplicating the consuming rule.

Correct example

:root { --card-accent: #0f766e; } .card--alert { --card-accent: #dc2626; } .card-title { color: var(--card-accent); }

Normal cards use green, while the alert variant changes the token locally to red.

Common mistake

.card-title { color: #0f766e; } .card--alert .card-title { color: #dc2626; }

Duplicating the rule works visually but does not practise configuring the component through an inherited token.

STEP 2 · APPLY

Your exercise

Define the base #0f766e token, override it with #dc2626 in .card--alert and read it in .card-title.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The base token is #0f766e.
The alert variant overrides the token with #dc2626.
The heading reads the inherited token.
The target element is present in the page.

Explain the solution logic

The same .card-title rule consumes the token, while the cascade selects the value for each context.

How it works

Your exercise

Write and see the result

What needs to pass