.panel { color: #7c3aed; }\n.badge { color: inherit; }The badge takes the panel’s violet colour without repeating the hexadecimal value.
LESSON 13 OF 100
Explicit inheritance
Use the inherit value to take the parent colour.
STEP 1 · LEARN
How it works
The CSS-wide value inherit makes a property use the inherited value from its parent and states that intention explicitly.
.badge { color: #7c3aed; }The copied value looks the same but no longer follows a future parent colour change.
STEP 2 · APPLY
Your exercise
Complete the .badge rule with the inherit value.
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 panel has its base colour.
- ○.badge uses the inherit value.
Explain the solution logic
inherit preserves the parent-child relationship instead of copying a value that may change.