What CSS actually is, and the three ways to apply it
CSS (Cascading Style Sheets) is the language that controls how HTML actually looks — every visual decision the HTML series deliberately left out of Bright Leaf Coffee's markup. This series picks up exactly where that one ended: the same real site, now actually styled.
The real project this series builds
This series styles the exact same HTML built across the HTML From Scratch series — Bright Leaf Coffee's homepage, subscriptions page, and contact form. Nothing about the HTML changes; every part here adds real CSS on top of markup that's already correct, semantic, and accessible.
Three ways to apply CSS, and only one that's actually right for real work
<!-- 1. Inline: a style attribute directly on one element -->
<h1 style="color: #3d2b1f; font-size: 2.5rem;">Bright Leaf Coffee</h1>
<!-- 2. Internal: a <style> block inside <head> -->
<head>
<style>
h1 { color: #3d2b1f; font-size: 2.5rem; }
</style>
</head>
<!-- 3. External: a separate .css file, linked in <head> -->
<head>
<link rel="stylesheet" href="/styles/main.css" />
</head>/* styles/main.css */
h1 {
color: #3d2b1f;
font-size: 2.5rem;
}All three apply the exact same real styling — the difference is entirely about maintainability, not capability. Inline styles apply to one element and can't be reused; internal styles apply to one page and duplicate across every other page that needs the same rules; an external stylesheet is written once and linked from every real page, which is the only one of the three that scales to a genuine multi-page site like the one this series styles.
The real syntax, piece by piece
h1 {
color: #3d2b1f;
font-size: 2.5rem;
}h1 → the selector: which element(s) this rule applies to
{ ... } → the declaration block
color: ...; → a declaration: a property and a value, ending in a semicolonEvery real CSS rule follows this same shape — a selector, then a declaration block in curly braces containing one or more property: value; pairs. Part 2 covers selectors in real depth; this part is deliberately just enough syntax to write a first, real, external stylesheet.
Linking the real stylesheet
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bright Leaf Coffee — Small-batch coffee, roasted weekly</title>
<link rel="stylesheet" href="/styles/main.css" />
</head>This single <link> tag is added to every real page of Bright Leaf Coffee's site — the homepage, subscriptions, and contact pages built in the HTML series — so one shared stylesheet styles the entire real site consistently, rather than each page needing its own separate styling.
An external stylesheet isn't just more organized — it's genuinely faster for a real multi-page site. A browser caches an external CSS file after the first page load, so every subsequent page on the same site loads its styling from cache instantly, instead of re-downloading identical inline or internal styles on every single page.
What "cascading" in the name actually refers to
h1 { color: #3d2b1f; }
h1 { color: #ff8a3d; }When more than one real rule could apply to the same element, CSS has an actual, defined set of rules for which one wins — here, the second rule overrides the first simply by coming later in the file. This "cascade" is a real, core mechanism of the language, not an edge case, and part 3 covers it — along with specificity, its more nuanced counterpart — in full.
Next: selectors — the real, precise ways to target exactly the elements a rule should apply to, beyond just an element's tag name.