Chapter 15: HTML & CSS Styling Core
Core of HTML & CSS Styling — the absolute must-master foundation that controls how every pixel looks on the screen.
This is the layer where you go from “plain boring text” to “wow, this looks like a real modern website”. Everything else (Flexbox, Grid, animations, Tailwind, dark mode…) builds on top of these core concepts.
I’ll explain it like we’re sitting together in VS Code, line-by-line, with real examples you can copy-paste right now.
1. What Actually is “Styling Core” in CSS?
The core includes:
- How CSS selects elements to style (Selectors)
- How styles cascade and override each other (Cascade & Specificity)
- How styles inherit from parent to child (Inheritance)
- The Box Model — every visible thing is a box
- Basic properties you use every single day (color, typography, spacing, borders, backgrounds)
Master these → you can style almost anything. Ignore them → you fight CSS forever.
2. Core Concept #1 – Selectors (How CSS Finds What to Style)
| Selector Type | Example | What it targets | Specificity (higher = stronger) |
|---|---|---|---|
| Element | p { color: navy; } | All <p> tags | 0,0,0,1 |
| Class | .card { padding: 20px; } | Any element with class=”card” | 0,0,1,0 |
| ID | #header { background: #1e40af; } | Element with id=”header” (unique!) | 0,1,0,0 |
| Attribute | [type=”email”] { border: 2px solid; } | Any input with type=”email” | 0,0,1,0 |
| Pseudo-class | a:hover { color: red; } | Link when mouse is over | 0,0,1,0 |
| Pseudo-element | p::first-letter { font-size: 3rem; } | First letter of every paragraph | 0,0,0,1 |
| Combinator | .card > h3 | Direct child h3 inside .card | Adds parent specificity |
Quick rule of thumb 2026:
- Use classes for almost everything (reusable & maintainable)
- Use IDs only for JavaScript targets or one-time anchors
- Avoid overusing element selectors (too broad)
3. Core Concept #2 – The Cascade & Specificity
CSS = Cascading Style Sheets → styles fight each other, winner is decided by rules.
Order of importance (highest to lowest):
- Inline styles (style=”color:red;”) → almost never use (bad for maintenance)
- !important → very last resort (avoid like plague)
- Specificity (calculated as a,b,c,d)
- a = inline style (1,0,0,0)
- b = ID selectors (#id)
- c = classes, attributes, pseudo-classes
- d = elements, pseudo-elements
- Source order — last declaration wins if specificity is equal
Example specificity battle:
|
0 1 2 3 4 5 6 7 8 9 10 |
#container .card p { color: blue; } /* 0,1,1,1 */ .card p { color: green; } /* 0,0,1,1 */ p { color: red; } /* 0,0,0,1 */ /* Winner = blue (highest specificity) */ |
4. Core Concept #3 – Inheritance
Some properties pass down from parent to children automatically:
Inherited by default:
- color
- font-family, font-size, font-weight
- line-height
- text-align
- visibility, cursor
Not inherited (must set on each element):
- margin, padding, border
- background, width, height
- display, position
Quick tip: Set global typography on body or :root:
|
0 1 2 3 4 5 6 7 8 9 10 11 |
body { font-family: system-ui, sans-serif; font-size: 1.1rem; line-height: 1.6; color: #1e293b; } |
5. Core Concept #4 – The Box Model (Most Important!)
Every visible element = rectangular box with 4 layers:
Content → text/image (width & height) Padding → inside space Border → line around padding Margin → outside space
Modern fix (put this at the very top of every CSS file):
|
0 1 2 3 4 5 6 7 8 9 10 |
* { margin: 0; padding: 0; box-sizing: border-box; /* ← THE MOST IMPORTANT LINE IN CSS */ } |
Without border-box: width: 300px + padding 20px + border 10px = total 350px (annoying math) With border-box: total width stays 300px (padding & border eat inside)
6. Your “Styling Core” Demo Page – Build This Now!
index.html
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Styling Core – Webliance 2026</title> <link rel="stylesheet" href="style.css"> </head> <body> <header id="top" class="site-header"> <div class="container"> <h1>Styling Core Demo</h1> <p>Master selectors • cascade • box model • inheritance</p> </div> </header> <main class="container"> <section class="card"> <h2 class="card-title">Card Title</h2> <p>This card uses class selectors, border-box, and inherited typography from body.</p> <a href="#top" class="btn primary">Back to Top</a> </section> <section class="card featured"> <h2 class="card-title">Featured Card</h2> <p>Higher specificity overrides some styles — see yellow background.</p> <button class="btn danger">Danger Button</button> </section> <section> <h2>Inline vs Class (Inline wins!)</h2> <p style="color: purple; font-weight: bold;"> This paragraph has inline style — purple & bold (bad practice but demonstrates cascade). </p> </section> </main> <footer> <div class="container"> <p>© 2026 Webliance • Chai + Core Styling = Power</p> </div> </footer> </body> </html> |
style.css (all core concepts in one file)
|
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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
/* Reset & Box Model – Core #1 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Inheritance – Core #3 */ body { font-family: system-ui, sans-serif; line-height: 1.6; color: #1e293b; background: #f8fafc; } /* Container helper */ .container { max-width: 900px; margin: 0 auto; padding: 0 20px; } /* ID selector – high specificity */ #top { background: #1e40af; color: white; padding: 3rem 0; text-align: center; } /* Class selector */ .site-header h1 { font-size: 2.8rem; } /* Card component – reusable */ .card { background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); padding: 2rem; margin: 2rem 0; } /* Modifier class – overrides */ .card.featured { background: #fefce8; border: 2px solid #fbbf24; } /* Button – reusable with variants */ .btn { display: inline-block; padding: 0.8rem 1.6rem; border-radius: 6px; text-decoration: none; font-weight: 600; cursor: pointer; border: none; } .btn.primary { background: #3b82f6; color: white; } .btn.danger { background: #ef4444; color: white; } .btn:hover { opacity: 0.9; } /* Pseudo-class example */ a:hover { text-decoration: underline; } /* Specificity demo – this would lose to .card.featured */ section.card { border: 3px dashed red; /* ← won't win because .featured has higher specificity */ } |
Save both → right-click index.html → Open with Live Server.
Play with it:
- Change body { color: #111827; } → see inheritance everywhere
- Add style=”background: pink;” to one .card → see inline win
- Modify .card.featured background → only featured cards change
Quick Core Checklist (Bookmark This!)
- * { box-sizing: border-box; } at top
- Use classes > IDs > elements
- Set global typography on body or :root
- Understand why .card.featured beats .card
- Know when inheritance helps (fonts/colors) and when it doesn’t (margins)
- Avoid !important unless debugging
How does the page look/feel? Try changing one color and see the cascade in action?
Next steps you might want (just tell me):
- “teach me Flexbox as next core”
- “CSS variables for theming”
- “specificity battles practice”
- “positioning core (static/relative/absolute)”
- “modern reset with better typography”
You’re nailing the real heart of CSS now — keep going champ! 🚀 Chai break ho gaya? 😄
