CSS is just the answer to "what should it look like?"
In Module 01 you learned HTML — the what. A headline, a paragraph, a list. That's all HTML cares about. CSS is the other half: the how. How big is the headline? What color? Which font? How much space around things? CSS answers all those questions.
Your Module 01 page is a real page — but it looks like every page every browser has ever shown without styling. Black text, white background, default font. CSS is how you give it a voice.
Same exact HTML. Zero changes to the content. The only difference is a small stylesheet telling the browser "here's how to show this."
HTML says what your page is. CSS says how it feels. Both matter. A page with great HTML and no CSS is a dry academic paper; a page with great CSS and no real HTML is a pretty shell with nothing to say.
Before you pick colors, pick a feeling.
This is the part most beginners skip — they open the CSS file and start throwing colors in without deciding what the page should feel like first. Pick one vibe. Your whole page will be built around it.
None of these are "right" or "wrong." Pick the one that fits the thing your page is about. A page about a book on sailing = cool. A page about your dog's birthday = playful. A page about your grandfather = classic. Or break the rules — both good answers.
Five CSS rules do 80% of the work.
CSS has hundreds of properties. You only need five to make a page that looks great. Anyone who tells you otherwise is showing off.
Text color
Sets the color of text. Use a color name like navy, or a hex code like #1B2A4E.
Background color
Paints behind an element. Use the same color system — name or hex.
The typeface
Choose a font. Stick to one or two — three fonts on one page is usually wrong.
Space inside a box
How much empty space is inside an element, between its content and its edge. Pages that "breathe" use lots of padding.
Don't stretch forever
Limits how wide something can get on a wide screen. Text that spans the entire page is almost always too wide to read comfortably.
You'll see people write CSS with hundreds of lines and dozens of properties. Don't let it scare you. Look closely and most of it is the same five things over and over. Master these five and you can read any stylesheet in the world.
Here's a complete CSS file.
Same dog page from Module 01, now with a warm, paper-and-sunshine stylesheet. About 20 lines of CSS total. You can copy this, change every color and font, and the structure still works.
/* Warm paper-and-sunshine palette */ body { background: #FBF5E6; /* warm cream */ color: #1B2A4E; /* deep navy */ font-family: Georgia, serif; max-width: 640px; margin: 0 auto; /* center on page */ padding: 48px 24px; line-height: 1.6; } h1 { color: #E85A4F; /* tomato red */ font-size: 2.5rem; margin-bottom: 0.5em; } h2 { color: #D69512; /* dark sun yellow */ font-size: 1.4rem; margin-top: 2em; } ul { padding-left: 1.2em; } strong { background: #F2B134; /* highlight on bold text */ padding: 0 4px; border-radius: 3px; }
Notice the pattern: each selector (like body or h1) gets a block of rules in curly braces. Inside the braces, each rule is property: value;. That's the whole grammar of CSS in one sentence.
To use this file in a real HTML page, add one line inside <head>:
<link rel="stylesheet" href="buddy.css">
Type CSS on the left. Watch your page transform.
The HTML is locked — same dog page from Module 01. You're only editing the stylesheet. Every keystroke updates the preview. Your vibe (—) is already preloaded.
; at the end of lines.
Knowing CSS isn't the same as having taste.
Two judging rounds. Both pages technically work. Only one of each pair looks good. Spot why.
Round 1. A kid's stylesheet for their bike page. Which choice is better taste?
Round 2. How much empty space should a page have?
Five things to do. Five things not to do.
- Do: Pick two or three colors maximum. One is the background, one is the text, one is an accent.
- Do: Pick one or two fonts. Sans for UI + serif for writing is the classic combo.
- Do: Leave generous padding. More than you think is right.
- Do: Use max-width so text doesn't stretch across huge screens.
- Do: Let the HTML structure do most of the work. CSS should whisper, not shout.
- Don't: Use gradients — they almost always look like the 2010s.
- Don't: Mix three or more fonts.
- Don't: Use drop shadows on text.
- Don't: Center everything — centered body text is hard to read.
- Don't: Try to make it flashy. Flash ages badly. Restraint stays young.
You gave your page a voice.
Same HTML, completely different feel. That's the power — and the responsibility — of CSS.
What you just learned
- HTML is the what. CSS is the how it feels.
- Five CSS properties do 80% of the work: color, background, font-family, padding, max-width.
- Pick a vibe before you pick individual colors. The vibe is the decision. The colors are the consequences.
- Restraint wins. Two colors and one font will almost always beat six colors and three fonts.
- Space is a feature, not waste. Readers need room to breathe.
- CSS should whisper, not shout. Let the HTML content do most of the work.
In Module 03, your page stops being static and starts doing things. Buttons that do stuff. Lists that grow. That's JavaScript — the third language your page will speak.
★ Before you call it done
Three questions. Same three. Every time.
These are the same three questions for every module in Kindling. They are how you check whether AI did the part it should and you did the part only you could. Tap each one to mark it true.
★ ★ ★