Full Stack Web Development

Chapter 2: CSS3 ��� Styling the Web

Chapter 2: CSS3 — Styling the Web

2.1 Learning Objectives
2.2 Prerequisites
2.3 Introduction
2.4 Real-Life Analogy
2.5 Why This Topic Exists
2.6 Where It Is Used
2.7 Detailed Explanation: How CSS Connects to HTML
2.8 CSS Syntax Breakdown
2.9 Selectors — How to Target Elements
2.10 The Cascade — How Conflicts Are Resolved
2.11 The CSS Box Model
2.12 Colors, Backgrounds, and Typography
2.13 Display and Positioning (Foundations)
2.14 Common Beginner Mistakes
2.15 Best Practices
2.16 Interview Questions
2.17 Practice Questions
2.18 Coding Exercises
2.19 Mini Challenge
2.20 MINI PROJECT: Styled Landing Page
2.21 Summary
2.22 Key Takeaways

Chapter 2: CSS3 — Styling the Web

2.1 Learning Objectives

By the end of this chapter, you will be able to:

1. Explain what CSS is and how it connects to HTML.

2. Understand the CSS Box Model deeply — margin, border, padding,
content.
3. Use selectors to target exactly the elements you want to style.
4. Style colors, typography, backgrounds, borders, and spacing
confidently.
5. Understand the “Cascade” and how CSS decides which rule wins
when there’s a conflict.
6. Apply CSS three different ways (inline, internal, external) and
know which to prefer.
7. Style the Personal Profile Page from Chapter 1 into a visually
polished page.
8. Build a mini project: a Styled Landing Page.

2.2 Prerequisites
Chapter 1 (HTML5) completed — you should be comfortable
 reading and writing basic HTML tags.
A text editor (VS Code recommended).
A browser with Developer Tools (all modern browsers have this —
right-click → “Inspect”).

2.3 Introduction
In Chapter 1, you built a Personal Profile Page. It worked — but it
looked like a plain document from the 1990s: black text, blue links, no
color, no spacing, default fonts. That is exactly what unstyled HTML
looks like.

CSS stands for Cascading Style Sheets. Let’s break the name apart:

Word Meaning
Rules “flow down” and can
override each other based on
Cascading
specific priority rules (specificity,
order, importance).
Visual presentation — colors,
Style
fonts, spacing, layout.
A document containing a
Sheets
collection of style rules.

CSS is the language that tells the browser: “Make this heading blue.
Make this box 300 pixels wide. Center this text. Add space between
these items.”

Where HTML says what something is (a heading, a paragraph, a

button), CSS says how it should look.

2.4 Real-Life Analogy

Remember our house-building analogy from Chapter 1? HTML built
the frame (walls, rooms, doors). CSS is the interior design and
paint job:

HTML → the walls, rooms, doors (structure)

CSS → paint color, furniture placement, curtains, lighting
(style)

Another useful analogy: think of HTML as a Word document with no

formatting — just plain text with headings marked. CSS is like
opening the “Format” menu and choosing fonts, colors, spacing, and
alignment. The words don’t change; only their appearance does.

2.5 Why This Topic Exists

In the early days of the web (mid-1990s), there was no CSS.
Developers styled pages by stuffing style information directly into
HTML tags, like <font color="red" size="5">. This created two huge
problems:

1. Repetition — if you wanted every heading on a 100-page website

to be blue, you had to edit <font color="blue"> on all 100 pages
individually.
2. Mixing concerns — structure and style were tangled together,
making pages hard to maintain and update.

In 1996, the World Wide Web Consortium (W3C) introduced CSS to

solve this by separating structure (HTML) from presentation
(CSS). Now, one CSS file can style an entire website, and changing a
single rule can instantly restyle thousands of pages.

2.6 Where It Is Used

Every visually styled website on the internet.
Mobile app web views.
Email templates (a limited subset of CSS).
PDF/print stylesheets (CSS has special rules just for printing).
Every CSS framework you’ve heard of — Bootstrap, Tailwind CSS,
Bulma — is ultimately just pre-written CSS you apply to your
HTML.
Every React/Vue/Angular application still uses CSS (or CSS-in-JS,
which compiles down to CSS) to style components.

2.7 Detailed Explanation: How CSS

Connects to HTML
There are three ways to add CSS to a page. Let’s explore all three,
then discuss which to prefer.

Method 1: Inline CSS (avoid in real projects)

<h1 style="color: blue; font-size: 32px;">Hello</h1>

The style attribute holds CSS directly on the element.

Downside: Not reusable, hard to maintain, mixes structure and
style again (defeats the whole purpose of CSS).

Method 2: Internal CSS (okay for small single-page

examples)

<head>
<style>
h1 {
color: blue;
font-size: 32px;
}
</style>
</head>

CSS rules are placed inside a <style> tag in the <head>.

Applies only to that one HTML file.

Method 3: External CSS (the professional standard —

always prefer this)

[Link]

h1 {
color: blue;
 font-size: 32px;
}

[Link]

<head>
<link rel="stylesheet" href="[Link]">
</head>

<link> connects an external .css file to the HTML document.

rel="stylesheet" tells the browser this linked file is a stylesheet.
href="[Link]" is the path to the CSS file.
Why this is best: One CSS file can style unlimited HTML pages.
Change one rule, and every linked page updates instantly. This is
how real websites are built.

✅ Best Practice: From this point forward in the book, we will

always use external CSS.

2.8 CSS Syntax Breakdown

Let’s dissect a single CSS rule completely:

p {
color: darkslategray;
font-size: 18px;
}

p { color: darkslategray; font-size: 18px; }

↑ ↑ ↑ ↑ ↑ ↑
selector declaration property property value end
block starts of
block

Term Meaning In this example

Chooses WHICH p (targets all
Selector
element(s) to style paragraphs)
{ color:
Declaration Block Everything inside { } darkslategray; font-
size: 18px; }
One property-value color:
Declaration
pair, ending in ; darkslategray;
The aspect you’re
Property color, font-size
styling
What you’re setting
Value darkslategray, 18px
the property to
Separates
declarations
(required, except
; optionally on the last
one — but always
include it, it’s a best
practice)
Wraps the whole
{ }
declaration block

Rule: selector { property: value; property: value; }

2.9 Selectors — How to Target Elements
Selectors are one of the most important concepts in CSS. Here is a
complete reference table:

Selector Syntax Targets Example

Every single
Universal * * { margin: 0; }
element
All elements
Type/Element tagname p { color: gray; }
of that tag
All elements
with that .card { border:
Class .classname
class 1px solid; }
attribute
The one #header {
ID #idname element with background: navy;
that id }
B elements
nav a { color:
Descendant A B INSIDE A
white; }
(any depth)
B elements
that are ul > li { list-
Child A > B
DIRECT style: none; }
children of A
h1, h2, h3 { font-
Group A, B Both A and B family: sans-
serif; }
A elements in
a:hover { color:
Pseudo-class A:state a certain
red; }
state
Elements
input[type="text"]
with a
Attribute [attr=value] { border: 1px
matching
solid gray; }
attribute

Example in context:

<div class="card" id="main-card">

<h2>Title</h2>
<p>Some text</p>
</div>

.card { padding: 20px; } /* targets the div by class */

#main-card { border-radius: 8px; } /* targets the div by id */
.card h2 { color: navy; } /* targets h2 INSIDE .card */

Class vs ID — critical distinction:

Class (.name) ID (#name)

Should be used on
Can be used on
Reusability only ONE element
MANY elements
per page
Syntax in HTML class="card" id="main-card"
Syntax in CSS .card #main-card
Higher (overrides
Priority (specificity) Lower
classes)
Styling groups of Unique, one-of-a-kind
When to use similar elements elements (e.g., a
(most common case) single page header),
or JavaScript hooks

⚠ Common Mistake: New developers overuse IDs. In real

projects, 90%+ of your styling should use classes, not IDs,
because classes are reusable and more flexible.

2.10 The Cascade — How Conflicts Are

Resolved
What happens when two rules target the same element with different
values? CSS decides using three factors, in this priority order:

1. IMPORTANCE (!important flag — avoid using this in real projects)

↓
2. SPECIFICITY (how "precise" the selector is)
↓
3. SOURCE ORDER (later rules win over earlier ones, if specificity
is equal)

Specificity, simplified:

Specificity
Selector Type
Weight
Inline style (style="...") Highest (1000)
ID (#name) 100
Class, attribute, pseudo-class (.name, [attr],
10
:hover)
Element/type (p, div) 1

Example:

p { color: black; } /* specificity: 1 */

.text { color: blue; } /* specificity: 10 */
#intro { color: red; } /* specificity: 100 */

<p class="text" id="intro">What color am I?</p>

Answer: Red. Because #intro (ID) has the highest specificity (100), it
wins regardless of the order the rules were written in.

Note: If two rules have EQUAL specificity, the one that

appears later in the CSS file wins. This is the actual “Cascading”
part of Cascading Style Sheets.

2.11 The CSS Box Model

This is, without exaggeration, the single most important concept
in all of CSS. Every single HTML element on a page is treated by the
browser as a rectangular box, made of four layers:

┌───────────────────────────────────────────┐
│ MARGIN │ ← space OUTSIDE the
box, transparent
│ ┌─────────────────────────────────────┐ │
│ │ BORDER │ │ ← the edge/frame of
the box
│ │ ┌─────────────────────────────┐ │ │
│ │ │ PADDING │ │ │ ← space INSIDE the
box, around content
│ │ │ ┌───────────────────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │ ← the actual
text/image/etc.
│ │ │ └───────────────────────┘ │ │ │
│ │ └─────────────────────────────┘ │ │
│ └─────────────────────────────────────┘ │
└───────────────────────────────────────────┘

Layer Meaning CSS Property

The actual text,
Content image, or element width, height
itself
Space between the
content and the
Padding padding
border (inside the
box)
A visible (or
Border invisible) line around border
the padding
Space between this
box and neighboring
Margin margin
boxes (outside the
box)

Code Example

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 30px;
background-color: lightblue;
}

Line-by-line explanation:

width: 200px; → the content area is 200 pixels wide.

height: 100px; → the content area is 100 pixels tall.
padding: 20px; → adds 20px of space on all four sides between the
content and the border.
border: 5px solid black; → this is shorthand for THREE values at
once: border-width: 5px, border-style: solid, border-color: black.
margin: 30px; → adds 30px of space outside the border, pushing
other elements away.
background-color: lightblue; → fills the content + padding area
with color (NOT the margin — margin is always transparent).

What happens internally — the crucial gotcha

By default, the browser uses box-sizing: content-box, meaning:

Total rendered width = width + padding(left+right) +

border(left+right)
For our example: 200 + (20+20) + (5+5) = 250px total width — even
though you wrote width: 200px! This confuses almost every beginner.

The fix — used in nearly every modern project:

* {
box-sizing: border-box;
}

With border-box, the width you specify includes padding and border.
So width: 200px truly means the box takes up exactly 200px, and
padding/border are subtracted from the inside instead of added to the
outside.

✅ Best Practice: Always add * { box-sizing: border-box; } at

the top of every CSS file. It makes sizing predictable and is
considered standard practice industry-wide.

Shorthand vs. Longhand for spacing

/* Longhand — four separate properties */

.box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}

/* Shorthand — one property, TRBL order (clockwise from top) */

.box {
margin: 10px 20px 10px 20px;
}

/* Shorthand — two values = (top&bottom) (left&right) */

.box {
margin: 10px 20px;
}

/* Shorthand — one value = all four sides equal */

.box {
margin: 10px;
}

Remember the order using the phrase: “TRouBLe” → Top, Right,

Bottom, Left (clockwise, starting at 12 o’clock).

2.12 Colors, Backgrounds, and

Typography

Color Formats

.example1 { color: red; } /* named color */

.example2 { color: #ff0000; } /* hexadecimal */
.example3 { color: rgb(255, 0, 0); } /* red, green, blue (0-255
each) */
.example4 { color: rgba(255, 0, 0, 0.5); }/* rgb + alpha
(transparency, 0-1) */
.example5 { color: hsl(0, 100%, 50%); } /* hue, saturation,
lightness */
 Format Explanation
~140 predefined names like red,
Named
navy, tomato. Easy but limited.
Two hex digits each for Red,
Hex (#RRGGBB) Green, Blue (00–ff). Most
common in professional CSS.
Same as hex but in decimal (0–
rgb() 255). More readable for some
developers.
Adds an alpha channel (0 = fully
rgba()
transparent, 1 = fully opaque).
Hue (0–360°), Saturation (%),
Lightness (%). Great for creating
hsl() color variations (e.g.,
darker/lighter shades) by just
changing one number.

Typography

body {
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
text-align: left;
letter-spacing: 0.5px;
text-transform: none;
}

Property Meaning
List of fonts, in order of
preference. The browser uses
the first one it can find, falling
font-family
back down the list. Always end
with a generic family (sans-serif,
serif, monospace) as a safety net.
Size of the text. Common units:
px (fixed pixels), em (relative to
font-size parent’s font size), rem (relative
to the root/<html> font size —
most predictable for scaling).
Boldness: normal (400), bold
font-weight (700), or numeric values 100–
900.
Vertical spacing between lines of
text — crucial for readability.
line-height
1.5–1.6 is a common comfortable
value.
Horizontal alignment: left,
text-align
right, center, justify.
letter-spacing Space between individual letters.
uppercase, lowercase, capitalize,
text-transform
or none.

Backgrounds

.hero {
background-color: #1e293b;
 background-image: url('[Link]');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

background-size: cover → scales the image to completely cover the

box, cropping if necessary, while keeping its aspect ratio.
background-position: center → centers the image within the box.
background-repeat: no-repeat → prevents the image from
tiling/repeating (the default behavior).

2.13 Display and Positioning

(Foundations)
Before Flexbox and Grid (next chapters), you must understand the
basics of display and position.

The display property

.a { display: block; }
.b { display: inline; }
.c { display: inline-block; }
.d { display: none; }

Value Behavior
Takes up the full width available;
starts on a new line. Examples
block
by default: <div>, <p>, <h1>,
<section>.
Takes up only as much width as
its content; does NOT start a
inline new line; cannot have
width/height set. Examples by
default: <span>, <a>, <strong>.
Flows inline like text, BUT you
CAN set width/height on it. Best
inline-block
of both worlds for small UI
elements.
Completely removed from the
page (takes up no space at all —
none different from visibility:
hidden, which hides it but still
reserves its space).

The position property (brief introduction)

.relative-box { position: relative; top: 10px; left: 10px; }

.absolute-box { position: absolute; top: 0; right: 0; }
.fixed-box { position: fixed; bottom: 20px; right: 20px; }

Value Behavior
Default. Normal document flow.
static
top/left/etc. have no effect.
Positioned relative to its OWN
relative normal position. Moving it
doesn’t affect other elements.
 Removed from normal flow;
positioned relative to the nearest
ancestor with position: relative
absolute
(or absolute/fixed). If none
exists, relative to the whole
page.
Positioned relative to the
browser window; stays in place
fixed
even when scrolling (great for
sticky headers/buttons).
A hybrid: behaves like relative
sticky until a scroll threshold, then
“sticks” like fixed.

Tip: A very common pattern is: .parent { position: relative;

} combined with .child { position: absolute; } — this lets you
precisely place the child anywhere inside the parent box (used
constantly for badges, icons, overlays).

2.14 Common Beginner Mistakes

1. Forgetting box-sizing: border-box, leading to unexpectedly
oversized elements.
2. Overusing IDs instead of classes, making CSS rigid and hard to
reuse.
3. Using !important to “force” a style to work, instead of
understanding why the correct rule wasn’t applying (usually a
specificity issue). !important should be a last resort, almost never
needed in well-structured CSS.
4. Confusing margin and padding — remember: padding is
INSIDE the border (adds to background-colored space); margin is
OUTSIDE the border (always transparent).
5. Not understanding that inline elements ignore width/height.
6. Using pixel values for everything, making designs hard to scale.
Consider rem for font sizes and spacing.
7. Forgetting that CSS files must be linked correctly — a
common bug is a wrong file path in <link href="...">, silently
causing “my CSS isn’t working!” confusion. Always check the
browser’s Network tab in DevTools if styles don’t apply.
8. Not using browser DevTools. Beginners guess-and-check by
editing code repeatedly. Instead, right-click any element →
“Inspect” → live-edit CSS directly in the browser to experiment
instantly.

2.15 Best Practices

Always use external CSS files, linked via <link>.
Set * { box-sizing: border-box; } and a CSS reset/normalize at
the top of your stylesheet.
Prefer classes over IDs for styling.
Keep selectors as simple/flat as possible — deeply nested selectors
(div ul li a span) are fragile and hard to override.
Group related styles together and add comments (/* Navigation
styles */) for readability.
Use consistent naming conventions for classes (we’ll cover BEM —
Block Element Modifier — naming later in the Responsive Design
chapter).
Use rem for font sizes so users’ browser zoom/accessibility settings
 are respected.

2.16 Interview Questions

1. What is the CSS Box Model? Name its four layers in order from
inside to outside.
2. What’s the difference between margin and padding?
3. What does box-sizing: border-box do, and why is it commonly
used?
4. Explain CSS specificity. Which wins: .class or #id?
5. What’s the difference between display: none and visibility:
hidden?
6. What’s the difference between position: relative and position:
absolute?
7. Why is external CSS preferred over inline CSS in professional
projects?
8. What is the difference between em and rem units?
9. What does the Cascade in “Cascading Style Sheets” actually refer
to?
10. What’s the difference between a class selector and an element
selector, in terms of specificity?

2.17 Practice Questions

1. Write a CSS rule that makes every <h2> inside a <section> element
navy blue.
2. Explain, using the box model diagram, why a box with width:
100px; padding: 10px; border: 2px solid; renders wider than
100px under content-box sizing.
3. What specificity value would .nav .link:hover have? (Hint: count
classes and pseudo-classes.)
4. When would you use position: fixed in a real website? Give one
practical example.
5. Why should !important generally be avoided?

2.18 Coding Exercises

Exercise 1: Create a [Link] file and link it to an HTML page.
Style all paragraphs to have gray text and a font size of 18px.

Exercise 2: Create three <div> boxes side by side (hint: use display:
inline-block) each with a different background color, padding of 20px,
and a 2px black border.

Exercise 3: Create a navigation bar (<nav> with several <a> links) and
style the links to remove the default underline, change color on hover,
and add spacing between them.

Exercise 4: Demonstrate the specificity cascade: create a paragraph

with both a class and an ID, give each conflicting colors, and confirm
which one wins in the browser.

Exercise 5: Build a “card” component: a box with an image, a

heading, a paragraph, rounded corners (border-radius), and a subtle
box shadow (box-shadow).
2.19 Mini Challenge
Take your Personal Profile Page from Chapter 1 and fully style it: -
Give the page a consistent color theme (pick 2–3 colors). - Style the
<header> with a background color and centered text. - Style the skills
list to remove bullets and display as colored “pill” badges using
inline-block and border-radius. - Style the experience table with
alternating row colors and padding. - Add a hover effect on links in the
Contact section.

This challenge forces you to apply selectors, the box model, colors,
and typography together in one real project.

2.20 MINI PROJECT: Styled Landing Page

Project Goal

Build a simple, attractive landing page for a fictional product, using

pure CSS (no Flexbox/Grid yet — those get their own dedicated
chapters next). We’ll rely on display: inline-block, the box model, and
basic positioning.

HTML ([Link])

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>BrightTask — Simple Task Manager</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<header class="hero">
<h1 class="hero__title">BrightTask</h1>
<p class="hero__subtitle">Organize your day, effortlessly.
</p>
<a href="#" class="btn">Get Started — It's Free</a>
</header>

<main class="features">
<div class="card">
<h3>Fast</h3>
<p>Add tasks in seconds with our clean, distraction-free
interface.</p>
</div>
<div class="card">
<h3>Simple</h3>
<p>No clutter. Just your tasks, organized the way you
like.</p>
</div>
<div class="card">
<h3>Free</h3>
<p>All core features, free forever. No credit card
required.</p>
</div>
</main>
 <footer class="site-footer">
<p>&copy; 2026 BrightTask. All rights reserved.</p>
</footer>

</body>
</html>

CSS ([Link])

/* ---------- Reset ---------- */

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Segoe UI', Arial, sans-serif;
line-height: 1.6;
color: #1e293b;
}

/* ---------- Hero Section ---------- */

.hero {
background-color: #0f172a;
color: white;
text-align: center;
padding: 80px 20px;
}

.hero__title {
font-size: 48px;
margin-bottom: 10px;
}

.hero__subtitle {
font-size: 20px;
color: #cbd5e1;
margin-bottom: 30px;
}

.btn {
display: inline-block;
background-color: #38bdf8;
color: #0f172a;
text-decoration: none;
font-weight: bold;
padding: 14px 28px;
border-radius: 6px;
}

.btn:hover {
background-color: #0ea5e9;
}

/* ---------- Features Section ---------- */

.features {
padding: 60px 20px;
text-align: center;
}

.card {
 display: inline-block;
width: 260px;
vertical-align: top;
margin: 15px;
padding: 30px 20px;
border: 1px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
text-align: left;
}

.card h3 {
color: #0ea5e9;
margin-bottom: 10px;
}

/* ---------- Footer ---------- */

.site-footer {
background-color: #0f172a;
color: #cbd5e1;
text-align: center;
padding: 20px;
}

Step-by-Step Explanation

1. The Reset (* { margin: 0; padding: 0; box-sizing: border-box; })

removes inconsistent default spacing browsers apply to <body>,
headings, and lists, giving us a predictable clean slate, and turns
on border-box sizing globally.

2. .hero uses text-align: center to center inline/inline-block content,

a dark background-color, and generous padding (80px top/bottom,
20px left/right) to create breathing room — a hallmark of
professional design.

3. .hero__title and .hero__subtitle use BEM naming

(block__element) — hero is the block, title/subtitle are elements
within that block. This naming convention (covered fully in the
Responsive Design chapter) keeps large stylesheets organized and
avoids class name collisions.

4. .btn is set to display: inline-block specifically so that padding

works correctly on what is naturally an inline <a> element —
remember, plain inline elements ignore width/height/vertical
padding rules in some contexts. This is a textbook real-world use of
inline-block.

5. .btn:hover is a pseudo-class selector — it applies only while the

mouse hovers over the button, giving interactive feedback without
any JavaScript.

6. .card elements use display: inline-block and a fixed width: 260px

so they sit side-by-side, wrapping to a new line automatically if the
browser window is too narrow to fit them — a simple, primitive
form of responsiveness that we will make far more powerful with
Flexbox and Grid in the next two chapters.

7. box-shadow: 0 2px 8px rgba(0,0,0,0.08) — syntax: offset-x offset-

y blur-radius color. This creates a soft, realistic shadow beneath
each card, using rgba with low opacity (0.08) for subtlety rather
than a harsh black shadow.
Expected Output (conceptually)

┌─────────────────────────────────────────────┐
│ (dark hero section) │
│ BrightTask │
│ Organize your day, effortlessly. │
│ [ Get Started ] │
└─────────────────────────────────────────────┘

[ Fast card ] [ Simple card ] [ Free card ]

┌─────────────────────────────────────────────┐
│ © 2026 BrightTask. All rights. │
└─────────────────────────────────────────────┘

✅ Checkpoint: Resize your browser window narrower and

wider. Notice the cards wrap onto new lines when there isn’t
enough room — but the layout isn’t truly “responsive” yet
(things can still look awkward at certain widths). That’s
precisely the problem Flexbox and CSS Grid were invented to
solve — coming up in Chapters 3 and 4.

2.21 Summary
CSS separates presentation (style) from structure (HTML),
solving the maintenance nightmare of old inline-styled websites.
Always prefer external CSS files linked via <link>.
Every element is a box made of content, padding, border, and
margin — master this, and most layout confusion disappears.
box-sizing: border-box should be applied globally for predictable
sizing.
Selectors (element, class, ID, descendant, pseudo-class) let you
precisely target what to style.
The Cascade resolves conflicting rules using importance,
specificity, then source order.
display: block, inline, and inline-block control how elements flow
and whether width/height apply.
You built a real Styled Landing Page using colors, typography, the
box model, and basic display properties.

2.22 Key Takeaways

✅ CSS = presentation only; it never changes what content IS, only
how it looks.
✅ The Box Model (content → padding → border → margin) governs
every element’s size and spacing.
✅ Classes are reusable and preferred; IDs are unique and used
sparingly.
✅ Specificity determines which conflicting rule wins: inline > ID >
class > element.
✅ box-sizing: border-box is a near-universal best practice.
✅ You now know enough CSS to style real pages — next, we make
layout truly powerful with Flexbox.

Next: Chapter 3 — Flexbox, where we replace fragile inline-block

layouts with a purpose-built, powerful layout system.