Step 3 — CSS, how it looks

If HTML is what, CSS is how it looks — color, spacing, alignment, even responsive design.

The box model

Every element is four nested layers from inside out: content → padding → border → margin.

.card {
  margin: 16px;
  padding: 12px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

Picture this every time you debug layout.

Flexbox — one row or one column

.row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

gap, align-items, justify-content cover 90% of layout work.

Grid — two dimensions

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .cards { grid-template-columns: 1fr; }
}

Try it

Add a <style> block to step 2's index.html head:

<style>
  body { font-family: system-ui, sans-serif; max-width: 640px; margin: 40px auto; }
  h1 { color: #0ea5e9; }
</style>

Refresh — the text centers and the heading turns sky-blue.

Next

Step 4 makes pages move with JavaScript.