02-css

Part 2: CSS (15 min)

Goal

Make it look acceptable, and learn the two CSS concepts that matter most: the box model and flexbox.

What's here

• index.html — same as Part 1 plus <link rel="stylesheet" href="style.css">
• style.css — selectors and declarations

Run it

Right-click index.html → Open with Live Server.

How CSS works

selector {
  property: value;
}

Selectors target elements:

• h1 — every <h1>
• .container — every element with class="container"
• #task-input — the element with id="task-input"

The two concepts worth learning today

Box model

Every element is a box: content → padding → border → margin. In devtools, click an element and look at the bottom-right diagram — it shows all four layers with their pixel values. box-sizing: border-box (set on * in our stylesheet) makes width/height include padding and border, which is almost always what you want.

Flexbox

How you lay things out. The input and button sit side by side because of:

.row {
  display: flex;
  gap: 0.5rem;
}

That's it. display: flex on a parent turns its children into a horizontal row with the gap between them. Common modifiers:

• flex-direction: column — stack vertically instead
• justify-content: space-between — push children to the edges
• align-items: center — vertical alignment
• flex: 1 on a child — grow to fill remaining space (used here on #task-input)

Almost everything you'll lay out for the next year uses flexbox.

Try this

1. Change the colour of #add-btn. Save and watch it update.
2. In devtools, click the button, go to the Styles panel, and toggle declarations on/off with the checkboxes. Edit values inline. This is the fastest way to learn CSS.
3. Change .row to flex-direction: column — input stacks above button.
4. Add a new property to #task-list li: padding-left: 1rem and see the box model diagram update.

What's still missing

The Add button doesn't add anything. That's JavaScript — Part 3.

Next

→ Part 3: Vanilla JavaScript