Chapter 18: Cascade & Inheritance
Cascade Inheritance
These two words explain why your styles sometimes do what you expect… and sometimes completely ignore what you wrote. If you master Cascade + Inheritance, 70–80% of “Why isn’t my style applying?!” moments disappear forever.
Let’s go slow, step-by-step, like we’re sitting together with VS Code open and Live Server running.
1. What is the Cascade?
Cascade = the system CSS uses to decide which rule wins when multiple rules try to style the same property on the same element.
Think of it like a court case: several lawyers (CSS rules) are arguing about the same thing (e.g. “What color should this paragraph be?”). The judge (browser) follows strict rules to pick the winner.
The full cascade order (from strongest to weakest):
- Transition & animation declarations (almost never relevant for beginners)
- !important (very high priority — avoid unless debugging or overriding third-party CSS)
- Inline styles (style=”color: red;”) — extremely strong
- Specificity (we’ll cover this in detail next)
- Source order — if everything else is equal, the rule that appears later in the CSS file (or later <style> block) wins
2. Quick Visual Cascade Flowchart (Memorize This Mentally)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Is there !important? ↓ Yes → that wins (unless another !important has higher specificity) ↓ No Is there inline style? ↓ Yes → inline wins ↓ No Compare specificity scores (a,b,c,d) ↓ Higher score wins ↓ Tie? → go to source order (later rule wins) |
3. What is Inheritance?
Inheritance = some CSS properties are automatically passed down from a parent element to all its children (and grandchildren, etc.).
You set the style once on a parent → children get it “for free” (unless they override it).
Properties that inherit by default (very common):
- color
- font-family, font-size, font-weight, font-style
- line-height
- text-align
- text-indent
- letter-spacing, word-spacing
- visibility
- cursor
- list-style (for <ul>, <ol>)
Properties that do NOT inherit (you must set them explicitly on each element):
- margin, padding, border
- background, background-color
- width, height, display
- position, float, flex, grid
- box-shadow, border-radius
- overflow
Quick memory trick: If it affects how text looks or how the element behaves as a container → usually inherits. If it affects size, spacing, position, or visual boxes → usually does not inherit.
4. Real Example – Let’s See Both in Action
index.html – copy-paste this
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cascade & Inheritance – Webliance</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header class="site-header"> <h1>Cascade & Inheritance Demo</h1> <p>Hyderabad 2026 – Understanding why styles win or lose</p> </header> <main> <section class="card"> <h2>This Heading Inherits color & font from body</h2> <p>This paragraph also inherits color, font-family, line-height.</p> <p style="color: purple;">But this one has inline style → purple wins (cascade!)</p> <button class="btn">Normal Button</button> <button class="btn special">Special Button (overrides inherited styles)</button> </section> <section class="note"> <p>Note: margin & padding do NOT inherit — each element needs its own.</p> </section> </main> <footer> <p>© 2026 Webliance • Chai + CSS = Magic</p> </footer> </div> </body> </html> |
style.css – watch cascade & inheritance fight
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/* Global inheritance base – applied to body → passed to almost everything */ body { font-family: system-ui, sans-serif; font-size: 1.125rem; line-height: 1.6; color: #1e293b; /* ← inherited by all text */ background: #f8fafc; } /* Container – no inheritance needed for width/margin */ .container { max-width: 900px; margin: 0 auto; padding: 20px; } /* Header – overrides inherited color */ .site-header { background: #1e40af; color: white; /* ← overrides body color for header & children */ text-align: center; padding: 3rem 0; } /* Card – uses inherited typography */ .card { background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); padding: 2rem; margin: 2rem 0; } /* Button – does NOT inherit margin/padding/border */ .btn { padding: 0.8rem 1.6rem; border: none; border-radius: 6px; background: #3b82f6; color: white; font-weight: 600; cursor: pointer; } /* Special button – overrides some inherited + own properties */ .btn.special { background: #10b981; color: white; font-weight: bold; /* overrides inherited weight from body */ box-shadow: 0 4px 12px rgba(16,185,129,0.3); } /* Later rule wins if specificity is equal */ p { color: navy; /* appears later → would beat body color if specificity equal */ } /* But .site-header p has higher specificity → white wins there */ |
What You Should See & Experiment With
- All normal text is dark gray (#1e293b) → inheritance from body
- Header text is white → overrides inherited color
- Paragraph inside .card is navy → later p rule wins over body color (source order + equal specificity)
- Inline purple paragraph → inline style wins (cascade priority #3)
- Buttons have no margin/padding from body → non-inherited properties
- .btn.special has different background & shadow → specificity override
Quick experiments to do right now:
- Change body { color: teal; } → almost all text changes (inheritance!)
- Add color: lime !important; to body → everything turns lime (except inline styles)
- Move the p { color: navy; } rule beforebody rule → navy disappears (source order!)
- Add style=”color: orange;” to any <p> → orange wins (inline beats everything else)
Summary Table – Cascade vs Inheritance
| Concept | What it decides | Key mechanism | Memory trick / gotcha |
|---|---|---|---|
| Cascade | Which rule wins when many target same property | !important > inline > specificity > source order | Think of it as a fight with strict ranking |
| Inheritance | Which properties automatically pass to children | Automatic for text-related props | “Looks-related” yes, “Box-related” no |
How does it feel now? Any part still confusing? Want to see a bigger “specificity war” example with more competing rules?
Next possible steps:
- “selectors & specificity deep dive”
- “how to debug when styles don’t apply”
- “BEM to avoid specificity problems”
- “CSS custom properties + inheritance”
You’re getting very strong now — these two concepts unlock most CSS mysteries. Chai thanda mat hone dena — keep coding! 🚀 😄
