Step 2.3 · Day 2: CSS design

Style the header and navigation

Turn the bulleted list of links into a navigation bar with flexbox.

You will work in: css/styles.css

Style the header by adding this below your base styles.

css/styles.css

/* ===== 3. HEADER AND NAVIGATION ===== */
.site-header {
  background-color: var(--brown);
  color: var(--cream);
  text-align: center;
  padding: 1.5rem;
}

.site-header h1 {
  margin: 0;
  font-size: 2.25rem;
}

.tagline {
  margin: 0;
}

Code	What it does
`.site-header`	Selects the element with `class="site-header"`.
`color: var(--cream)`	Light text on the dark brown background. Text inside inherits this color.
`padding: 1.5rem`	Space inside the header, between its edge and its content, on all four sides.
`.site-header h1`	Only the `h1` inside the header. `margin: 0` removes the browser’s default space around headings.

Turn the links into a row with flexbox.

css/styles.css

nav ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

nav a {
  color: var(--cream);
  text-decoration: none;
}

nav a:hover {
  color: var(--tan);
  text-decoration: underline;
}

Code	What it does
`list-style: none`	Removes the bullets.
`padding: 0`	Removes the indent browsers add to lists.
`display: flex`	Turns on flexbox: the list items line up side by side in a row.
`flex-wrap: wrap`	Lets the links wrap onto a second line on narrow phones instead of squeezing.
`justify-content: center`	Centers the row of links horizontally.
`gap: 0.5rem 1.5rem`	Space between the links: 0.5rem between rows, 1.5rem between items.
`text-decoration: none`	Removes the underline. The `:hover` rule brings it back when the mouse is over a link, so visitors know it’s clickable.

Save and look. You have a dark header with centered navigation. Hover over the links to test the hover color.

Practice flexbox

Flexbox Froggy is a short game that teaches every flexbox property.