Teacher guide: Layout and components

The idea in plain words

A CSS rule is a selector and a list of property: value; pairs in braces. Two things can happen at once, and students need to know both.

First, an element takes the properties of every rule that matches it. A paragraph with class="note" matches p { } and .note { }, so it gets both rules' properties. Only when two rules set the same property does one have to win. Then a class rule beats a tag rule, and between rules of equal strength the later one wins.

Second, you can save typing. A group selector puts a comma between selectors, h1, p { color: navy; }, so one rule styles both. A space is different: nav a { } means "a link inside a nav", so it styles the menu links and leaves other links alone.

Why it matters

• Real stylesheets overlap. Every page has a tag rule and a few class rules that touch the same elements. Reading which one wins is the skill.
• Fewer rules. A group rule is one place to change, not three.
• Menus look different from text links. nav a is how every site styles its menu without touching other links.

An everyday picture, and where it breaks

School rules: "everyone wears uniform" (a tag rule) and "the netball team wears red" (a class rule). A netball player follows both, and where they clash, the more specific rule wins. Where it breaks: if two rules are equally specific, school has a person to decide; CSS just takes the later one.

Try it yourself (5 minutes)

1. Write p { color: teal; font-size: 20px; } and .note { color: crimson; }. Give one paragraph class="note". Is it teal, crimson, 20px?
2. Swap the order of the two rules. Does the colour change? (It should not: class beats tag.)
3. Add a second p { color: green; } below the first. Which paragraphs turn green? Why?
4. Join h1 and h2 into one rule with a comma.
5. Put two links in a <nav> and one in a paragraph. Write nav a { text-decoration: none; }. Which links change?

Questions students ask

• "Why is my class rule ignored?" Check the dot, and check the name matches. Then look for a later class rule that sets the same property.
• "Does the rule I wrote first lose?" Only for the properties both rules set. Otherwise both apply.
• "What is the difference between h1, p and nav a?" A comma means "and". A space means "inside".
• "If nav { color: white; } is set, why are the links not white?" Links have their own colour rule from the browser. Name the links: nav a { }.

How it connects

Rules that combine come first in Course B, and nav a styles the menu links. Block and inline boxes come next, then the layout lessons use class rules and nav a again. The final challenge needs all of it.

The idea in plain words

The browser draws every element as a box. Some boxes are block: <p>, <h1> and <div> start a new line and stretch across the page, so they stack. Others are inline: <strong>, <a> and <span> sit inside the line of text, side by side. <div> and <span> do nothing by themselves; they are plain boxes (block and inline) you wrap around things to style them. display: block or display: inline switches a box from one kind to the other.

A box has layers. Content is the text or picture. Padding is room inside, between the content and the border. The border is the line around it. Margin is space outside the border, pushing other boxes away. width sets only the content, so the width on the page is the width plus padding and border on both sides.

Why it matters

• Layout is boxes. Every layout idea after this one, rows, cards and gaps, is boxes placed next to each other.
• Surprises explained. A width that does nothing on a <span>, or a card wider than you set, both come from the box rules.
• Grouping. A <div> with a class lets you style a group of things as one.

An everyday picture, and where it breaks

A framed picture on a wall: the picture is the content, the mat around it is the padding, the frame is the border, and the gap to the next frame is the margin. Where it breaks: a frame's size usually includes its mat, but in CSS width is the picture only, so the padding and border add to it.

Try it yourself (5 minutes)

1. Put two paragraphs and a sentence with <strong> and <a> in a page. Which items stack, and which sit in the line?
2. Wrap two paragraphs in a <div class="box">. What changes? (Nothing, until a rule styles .box.)
3. Give .box a border: 2px solid navy;. Then add padding: 16px;. Watch the text move away from the line.
4. Add margin: 24px;. Which way does the whole box move?
5. Set width: 200px; then add padding: 20px. Measure the box: 240px, not 200px, plus the border.
6. Give a <span> a width. Nothing happens. Add display: block.

Questions students ask

• "Why does my width not work?" Inline boxes ignore width. Make it block.
• "Padding or margin?" Padding is inside the border, margin is outside it. If the background colour fills it, it is padding.
• "Why is my card wider than 300px?" Padding and border add to width.
• "Why did my <div> not change anything?" A <div> has no look of its own; it needs a rule.

How it connects

Block and inline come before the box model. A box with padding, a border and a width becomes a card, which the layout unit copies and puts in rows.

The idea in plain words

Normally boxes stack down the page. Flexbox puts them in a row. Put display: flex; on the box that holds the items (the parent), and its children sit side by side. It goes on the holder, never on the items.

Three more properties tidy the row. gap sets the space between items. justify-content says where the items sit along the row (flex-start, center, space-between). align-items says how they line up across it (center lines up different heights). flex-wrap: wrap lets items drop to a new line when the row runs out of room, and flex: 1 with a min-width lets items share the row without squashing.

A component is a chunk of HTML with a class that you copy. One set of rules styles every copy, so adding a card means copying HTML, not writing CSS.

Why it matters

• Menus, headers and card rows all use Flexbox. Nearly every site does.
• One page, any screen. A wrapping row fits a phone and a laptop without extra rules.
• Change once. If every card shares a class, a colour change is one edit.

An everyday picture, and where it breaks

A shelf: the shelf is the parent, the books are the items, and you decide how they sit along it and how they are spaced. Where it breaks: a real shelf has a fixed length. A wrapping row starts a new shelf when the first is full.

Try it yourself (5 minutes)

1. Make a <ul> of three links in a <nav>. Add nav ul { display: flex; }. The list becomes a row.
2. Add gap: 16px;, then try justify-content: space-between; and center.
3. Make a header with <h1> and the nav. Put display: flex; justify-content: space-between; on the header.
4. Make three <div class="card"> in a <section class="cards">. Add display: flex; flex-wrap: wrap; gap: 16px; to .cards.
5. Give .card flex: 1; min-width: 200px;. Make the window narrow. Copy a card: a fourth appears with no new CSS.

Questions students ask

• "I wrote display: flex and nothing moved." It is on the items. Move it to the box that holds them.
• "What is the difference between justify-content and align-items?" Along the row, and across it.
• "Why do my cards squash?" Without flex-wrap: wrap and a min-width, a row shrinks its items.
• "Do I write .card1, .card2?" No. One class on every card.

How it connects

Flexbox follows the box model: a row is boxes with padding, border and gap. The final challenge puts the club page's header, hero and cards in rows. An optional lesson adds Grid for rows and columns at once.

The idea in plain words

The Course B challenge lays out the club page from Course A. There is nothing new in it. Students work in three milestones, and the support fades: the first gives the exact code, the second an outline as comments, the third only the goals. Then they make it their own.

1. Header and menu: the club name on the left and the menu on the right (Flexbox on the header and on nav ul), links styled with nav a.
2. Hero and cards: a hero section and three cards in a row that wraps, all cards sharing one class.
3. Table, form and footer: padded table cells, the sign-up form as a card, each label on its own line, and a padded footer.

The starter is the finished Course A club page, so a student who skipped Course A can still begin. Finishing the core lesson marks Challenge complete on the course page. Two optional lessons go further: Grid lays out rows and columns together, and Make it react adds JavaScript as a recipe.

Why it matters

• Putting it together. Rules, boxes and rows have each been taught alone. Here they meet on a real page.
• Reading the picture. Planning the page as named parts is the habit that makes big tasks small.
• Nothing hidden. Because the page is theirs, students can show it and name the lesson behind each part.

An everyday picture, and where it breaks

Decorating a room you have already built: the walls are up, and now you arrange the furniture. Where it breaks: you cannot see a room from the plans, but with CSS, every change shows up straight away. Use that, and check after every change.

Try it yourself (5 minutes)

1. Do milestone 1 yourself in the playground, so you know where students get stuck.
2. Make the preview narrow. Do the cards drop onto new lines and not squash?
3. Copy a card to make a fourth. Does it need any new CSS?
4. Plan milestone 3 on paper: which earlier rule does each goal reuse?

Questions students ask

• "Where does display: flex go?" On the box that holds the items. In the header that is the header, and for the links it is the nav ul.
• "Why is my menu still in a column?" The list holds the links, so the list needs display: flex.
• "My cards are squashed." The row needs flex-wrap: wrap, and the card needs a min-width.
• "Can I start milestone 2 without finishing 1?" Yes: Reset to this task's start loads a working earlier milestone.

How it connects

The challenge reviews every move in both courses. Ask students to name three parts of the page and the rule behind each. After it, the optional Grid lesson, and then Bootstrap, the DOM course and a site of their own, build on this page.

Make a recipe card for something you can cook or make: the ingredients in a table with amounts, the steps as a numbered list, and CSS that makes it look like a card (a border, padding, a background).

Milestones:

• The ingredients are in a table with a heading row.
• The steps are a numbered list.
• A class selector gives the card a border, padding and a width, so it looks like a card.

<style>
  .card { width: 320px; border: 2px solid #c2570a; padding: 16px; background: #fff7ef; font-family: sans-serif; }
  th, td { padding: 4px 10px; text-align: left; }
  th { background: #c2570a; color: white; }
</style>

<div class="card">
  <h1>Pancakes</h1>
  <table>
    <tr><th>Ingredient</th><th>Amount</th></tr>
    <tr><td>Flour</td><td>1 cup</td></tr>
    <tr><td>Milk</td><td>1 cup</td></tr>
    <tr><td>Egg</td><td>1</td></tr>
  </table>
  <h2>Steps</h2>
  <ol>
    <li>Whisk everything together.</li>
    <li>Pour a little into a hot pan.</li>
    <li>Flip when bubbles appear.</li>
  </ol>
</div>

Make a page for a real or made-up event (a sports day, a concert, a games club): a header, a menu of sections, three cards side by side with what is on, and a footer.

Milestones:

• It uses page sections: header, nav, main and footer.
• Three or more cards sit side by side with Flexbox, with space between them.
• When the preview is narrow, the cards still fit (they wrap or shrink).

<style>
  body { font-family: sans-serif; margin: 0; }
  header, footer { background: #1d2430; color: white; padding: 12px 16px; }
  nav a { color: #ffb26b; margin-right: 12px; }
  .cards { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; }
  .card { flex: 1; min-width: 120px; border: 1px solid #ccc; border-radius: 10px; padding: 12px; }
</style>

<header>
  <h1>Games Club Night</h1>
  <nav><a href="#on">What's on</a><a href="#when">When</a></nav>
</header>
<main>
  <section id="on" class="cards">
    <div class="card"><h2>Chess</h2><p>Beginners welcome.</p></div>
    <div class="card"><h2>Card games</h2><p>Uno and more.</p></div>
    <div class="card"><h2>Video games</h2><p>Bring a friend.</p></div>
  </section>
</main>
<footer id="when">Friday, 4 pm, Library</footer>