CSS project 2, styling a website header band and logo

Project 2 builds the header you see at the top of most websites: a colored band across the page, the site name on the left, and a menu of links on the right. Over the next six lessons you will add one piece at a time. By lesson 21 the header will have a horizontal menu, clear hover and focus states, and a layout that stacks on a phone. This lesson sets up the files and styles the band itself.

The HTML below stays exactly the same from here to the end of the project. Every later lesson only adds CSS.

The page

Make a folder with two files, index.html and style.css. Put this in index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bench Notes</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <a class="logo" href="index.html">Bench Notes</a>
    <nav class="main-nav" aria-label="Main">
      <ul class="menu">
        <li><a href="index.html" aria-current="page">Home</a></li>
        <li><a href="guides.html">Guides</a></li>
        <li><a href="tools.html">Tools</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Welcome to the bench</h1>
    <p>Notes on old hardware, kept in one place.</p>
  </main>
</body>
</html>

Each element was chosen in the div and span lesson: <header> for the band, <nav> for the menu, a list for the links. Three details matter later. The viewport meta tag makes phones render the page at their real width, which lesson 20 relies on for its media query. The aria-current="page" attribute tells screen readers which page is open, and lesson 19 styles it. And the logo is a link to the home page, which is what visitors expect a site name to do.

The first rules

Open style.css and add these rules:

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #1f2328;
}

main {
  padding: 0 24px;
}

.site-header {
  padding: 16px 24px;
  background-color: #1d3b53;
  color: #ffffff;
  border-bottom: 4px solid #f2c14e;
}

.site-header a {
  color: inherit;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

What each rule does

1. body { margin: 0; } removes the 8 pixel margin browsers put around the page by default. Without it, a thin white strip shows on three sides of the header band. The font settings on body are inherited by everything else, so you set them once. system-ui uses the operating system's own interface font.
2. main gets side padding so the page text does not touch the edge of the window, now that the body margin is gone. The header has its own padding, and 24 pixels on both lines up the logo with the heading below it.
3. .site-header is the band. The padding from the padding lesson gives the content room to breathe, the dark blue background makes it a band, and the yellow bottom border separates it from the page.
4. color: #ffffff on the header makes its text white. Links ignore that, though. Browsers give links their own color, so the menu would stay the default blue, which is nearly invisible on dark blue. The .site-header a rule fixes that with color: inherit, which tells every link inside the header to take its parent's color. One rule covers the logo and all four menu links. It is a descendant selector, from the selectors lesson.
5. .logo makes the site name larger and bold. 1.5rem means one and a half times the root font size, so 24 pixels with default browser settings, and it grows if a visitor raises their font size.

What you should see

A dark blue band across the top with a yellow line under it. The site name sits in white near the top. Below it, still inside the band, is a bulleted list of four white, underlined links running down the page. That looks unfinished, and it is: the list turns into a row in the next lesson, and the underlines come off in lesson 19.

The colors are chosen to read well. White on #1d3b53 has a contrast ratio of about 11.6 to 1, well above the 4.5 to 1 that the WCAG accessibility guidelines ask for normal text. If you pick your own colors, check them in a contrast checker (browser developer tools have one built in) before building anything on top.

Try it

In the online HTML editor, paste the HTML, then delete the <link> line and put the CSS in a <style> element in its place, since the editor holds one page and cannot load a second file. Change the background color and watch the white text and links follow along. Then try removing the .site-header a rule to see the links go back to the browser's blue.