CSS course · Part 8: Projects · lab 12 of 12
Project: style the whole business site
Take the plain HTML site you built in the HTML course and turn it into a finished page: a reset and tokens, a sticky header, a hero, a styled price table and form, dark mode and a keyboard check.
By the end you can
- Set up a page from a reset and a small set of tokens
- Build a header that stays usable while the page scrolls
- Give a page rhythm: one container, consistent spacing, readable text
- Style data and forms without making them harder to use
- Finish with dark mode, keyboard states and reduced motion
Easier if you did first
step 1 of 5
Reset, tokens, and the words
This is the same site you marked up in the HTML course. The markup is correct and finished. Nothing you do here changes it.
Start the way a real project starts, in this order: reset, tokens, typography. Each one makes the next easier.
The reset is the short one from the architecture lab: border-box everywhere, no default margins, a line height on body, images as blocks with a max width, form controls inheriting the font.
The tokens are the colours and sizes the whole site will use. Name them for their job, not their appearance, so dark mode is possible later: --brand, --bg, --surface, --ink, --muted, --line, plus a radius and a couple of spacing steps.
Then the words. Body text around 1.0625rem with a line height of about 1.6. Headings tighter, around 1.15. Links in the brand colour, keeping their underline.
Do not lay anything out yet. Get the page readable first, and you will find the layout easier to judge.
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul { margin: 0; }
img { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
:root {
--brand: #0b7d4f;
--bg: #ffffff;
--surface: #f7faf8;
--ink: #111827;
--muted: #5b6b63;
--line: #e3e8e5;
--radius: 12px;
}
body {
background: var(--bg);
color: var(--ink);
font-family: system-ui, sans-serif;
font-size: 1.0625rem;
line-height: 1.6;
}What these words mean
- reset
- A short block putting browser defaults into a known state.
- token
- A named value used everywhere instead of a raw colour or size.
- named for its job
- --surface, not --light-grey, so dark mode can change the value.
- unitless line-height
- A plain number, so children scale it from their own size.
Easy to get wrong
Laying out the page before the text is readable
Reset, tokens, typography, then layout
Layout decisions depend on how big the text is and how much it breathes. Do it the other way round and you will redo the layout once the text settles.
Styling h1 and h2 separately with magic numbers
A size on body, then relative sizes for headings
Separate numbers drift apart as the site grows. Sizes derived from one base stay in proportion with each other.
What we check
- Border-box sizing is set
- Default margins are cleared
- There are at least six tokens
- Body text is readable: big enough, with room between the lines
- Links have the brand colour
- Links keep their underline
- The tokens are actually used