Control how a page is laid out, with boxes, Flexbox, Grid and components that repeat.
★ Challenge completeWhich rule wins, and how to style only the links in a menu.
Find out that an element takes every rule that matches it, and that a class beats a tag. A comma list shares one rule, as a handy extra.
Pick only the links inside the nav, so the menu can look different from the links in the text.
Block and inline, and every element as a box: padding, border and margin.
Find out why paragraphs stack while bold words sit in a line, and use div and span to group things you want to style.
See every element as a box with padding, a border and a margin, and find out that width sets only the content.
Read a longer stylesheet, find the rule that does a job, and change just that rule.
Rows with Flexbox, spacing, wrapping to fit any width, and components you copy.
Put boxes side by side in a row with Flexbox, and find out that it goes on the box that holds them.
Set the space between the items in a row, where the row sits them, and how they line up across it.
Let the items in a row drop to a new line when there is no room, so the same page fits a phone and a laptop.
Build a card once with a class, copy its HTML for every card you need, and let one set of rules style them all.
Lay out the club page from Structure and style a page. Two optional lessons go further: Grid, and a little JavaScript.
Lay out the Course A club page in three milestones, from a header with the menu on the right to a hero, a row of cards, a table, a sign-up card and a footer, then make it your own.
Arrange a page and a gallery in rows and columns with CSS Grid, and choose between Grid and Flexbox.
Add a few lines of JavaScript, as a recipe, so a button changes the page and a form greets people by name.
Progress is saved in this browser only. Nothing is sent anywhere.
For teachers: Teacher guide (notes, answers, solutions, slides and worksheets)