The page is correct, but it looks like 1995. Time to style it — with CSS. This lesson is about three things that explain almost every styling problem: how you point at elements, how the browser decides which rule wins, and how to change one colour in one place.

Three ways to attach styles

There are three ways to attach styles to a page:

<p style="color: red">              <!-- inline — avoid -->
<style> p { color: red } </style>   <!-- in the page — occasionally -->
<link rel="stylesheet" href="style.css">   <!-- this one -->

Use the third. One stylesheet, linked from every page, means one place to change the look of the whole site. Inline styles scatter the same decision across a hundred elements — and later they'll fight your JavaScript for control of an element too. The separation — HTML says what things are, CSS says what they look like — is the whole point.

Selectors: how you point at things

A CSS rule starts with a selector — it says which elements to style:

h1              { }   /* every h1 */
.card           { }   /* every element with class="card" */
#fav-count      { }   /* the one element with that id */
.card p         { }   /* paragraphs inside a card */
.nav-link:hover { }   /* while the pointer is on it */
[data-theme="light"] { }  /* by attribute — we use this today */

Class for styling, id for identity. A class can be used many times and is what you style with. An id must be unique on the page and is really for links and for finding an element from JavaScript. Styling by id works — and paints you into a corner, for reasons that become obvious two sections from now.

How would you select "the first card in the gallery"? Think before you read on. — :first-child. There's a whole family of these pseudo-classes, and you don't memorise them — you look them up. But you need to know they exist, or you'll add classes you don't need.

The cascade: when two rules fight

This is the real theory of the lesson. Picture three rules aimed at the same element:

p      { color: blue; }
.intro { color: green; }
#lead  { color: red; }

The element is <p class="intro" id="lead">. Which colour wins? Decide before you check. — Red wins.

The rule is simple: an id beats a class, a class beats an element. And between rules of equal weight, the one written later wins. That's nearly all of it — and it explains almost every "why is my CSS not applying" question you'll ever ask.

Now break it twice (open an empty scratch file and paste these three rules).

1. The sledgehammer. Add !important to the blue rule:

p { color: blue !important; }

Blue wins now, and nothing overrides it without another !important. Every time you use it you make the next change harder. If you need !important, your selectors are wrong — fix those, don't paper over them.

2. The rule that does nothing. Write .card p { color: red } for a paragraph that is not inside a card. Nothing changes. Inspect the element in the dev tools (F12 → Elements → Styles): applied rules are listed, overridden ones are struck through, and rules that never matched are simply absent. That panel answers the question faster than staring at the file — every single time.