Homework — an external stylesheet, a reset, custom properties, and two themes.

1. Attach the stylesheet. index.html has <link rel="stylesheet" href="style.css"> and data-theme="dark" on <html>.
2. The reset and body. At the top of style.css: * { box-sizing: border-box; margin: 0; padding: 0; } and a few body rules (font, background, colour, line height).
3. Custom properties for colour. Keep every colour in a variable (--bg, --surface, --text, --accent), named for its role, not its colour. No colour written straight into a rule.
4. Both themes. Write a [data-theme="light"] block with the light values of the same variables. Switch the theme by changing data-theme on <html> in the dev tools — the whole page must switch, with no JavaScript at all.

Try it alone: in the dev tools (F12 → Elements → Styles), find a CSS rule of your own that does nothing — struck through, or one that never matched. There's at least one.

Required result: the page is styled through variables, and the theme switches by changing one data-theme attribute.

To submit: screenshots of (1) the page in the dark theme, (2) the same page in the light theme, changing only data-theme.

Next. The page is styled — but to a screen reader it's a wall of undifferentiated text. Next lesson: choosing the right element, which turns out to matter more than any styling you'll do.