CSS — Giving a Page Its Looks

Lesson 3 · taught by Pip

We left our page structurally sound but plain as a typed memo. Today we make it beautiful. The language for that is CSS, and its whole job is appearance: color, spacing, size, fonts, and where things sit.

CSS never changes what a thing is — that's HTML's job. It only changes how that thing looks. The bones stay; we're adding skin and clothes.

Wardrobe rules for the page

Picture a stage director with a rule book. The book says: "Every narrator wears blue." "Each title is large gold letters." "Leave two steps of space around each actor." The director doesn't rewrite the play — the script is untouched. They just decide how everything appears.

CSS is that rule book. You write rules, and the browser dresses the labeled pieces of HTML to match.

How one rule works

A CSS rule has two halves. First it names who the rule is for. Then it lists what to do to them.

So a rule might say: "all the headings" — that's the who — "make them dark navy and large" — that's the what. Another might say: "this one button — make it green and rounded." You point at a group, then hand it a set of looks. That's the whole pattern, repeated for every part of a page.

The power lives in that naming. Because HTML already labeled everything — this is a heading, this is a paragraph — CSS can speak to those labels in bulk. "Every paragraph on the whole site, add comfortable space between the lines." Write that once, and a hundred paragraphs shift together.

One change, the whole site

That bulk reach is why a site can be redecorated overnight. Change the rule that says "all headings are navy" to "all headings are forest green," and every heading on every page turns at once — without touching a single word of the writing.

It's like choosing one paint for all the doors in a building. Decide on the color in one place, and every door matches. Change your mind, change one line, and they all update. The words never moved; only the paint did. 🔦

Layout: where things actually sit

CSS does more than color. It decides arrangement — should these three boxes sit side by side, or stack top to bottom? How much air sits between them? This is what makes a page feel designed instead of dumped onto the screen.

It's also how one page fits both a wide laptop and a narrow phone. You can write rules that say "place these in a row when there's room, but stack them when the screen is small." Same content, rearranged to fit the space — like folded shirts that sit side by side on a wide shelf and pile up on a narrow one. That bending-to-fit is why a good site reads cleanly whether it's in your palm or on your desk.

A consistent look is also how a brand feels like itself. When Portmint dresses a business's page or chat assistant, CSS is what carries that company's exact colors, fonts, and spacing into every corner — so it reads as their page, not a generic one.

Your turn

Look around the page you're reading. Name three things CSS is doing right now: a color choice, a spacing choice, a font choice. Then shrink your browser window narrow — watch what rearranges to fit. That bending is a layout rule quietly doing its job.

Our page now has bones and skin, but it can't do anything yet. Next, we add the motors: what JavaScript brings to a page. 🐙