Styling a Simple Page

This is the final lesson, and it is the payoff. You are going to style a complete page: header, main content, a card grid, and a footer, using only techniques you have already learned. Follow along with your own website open, because everything here can go straight into it.

The page structure

<header class="site-header">
  <strong>My Website</strong>
  <nav class="site-nav">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>
<main class="content">
  <h1>Welcome</h1>
  <p>Thanks for visiting my corner of the internet.</p>
  <div class="card-grid">
    ... your cards from last lesson ...
  </div>
</main>
<footer class="site-footer">
  <p>Made with care, and CSS.</p>
</footer>

Step 1: the foundation

Start every stylesheet with a few global rules. They set the tone for the entire site:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #333333;
  background-color: #fafafa;
}

img {
  max-width: 100%;
  height: auto;
}

Three familiar moves: predictable box sizing, comfortable typography inherited by the whole page, and images that never overflow. The margin: 0; on body removes a small default margin browsers add around every page. The off-white background is gentler than pure white and makes white cards stand out.

Step 2: the header

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #1a1a2e;
  color: white;
}

.site-nav {
  display: flex;
  gap: 16px;
}

.site-nav a {
  color: white;
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

Flexbox twice: once to push the site name and the menu to opposite ends, and once to space the links inside the menu. Notice .site-nav a, a selector you can read as "links inside .site-nav". Writing selectors with a space like this lets you style elements only in one part of the page, so these white links do not affect links elsewhere.

Step 3: the content column and the card grid

.content {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 700px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

The centered, capped content column from the responsive lesson, the grid from the grid lesson, and a media query so the cards stack into one column on phones. Your cards from the previous lesson drop straight into this grid with no changes.

Step 4: the footer

.site-footer {
  text-align: center;
  padding: 24px;
  color: #777777;
  border-top: 1px solid #e2e2e2;
  margin-top: 48px;
}

Quiet, centered, separated from the content by a hairline border. Footers should whisper, not shout.

Look at what you can do now

Scroll back through this lesson and count the techniques: box-sizing, inherited typography, flexbox headers, descendant selectors, centered max-width columns, grid, media queries, hover states. Twelve lessons ago you had never written a CSS rule. Now you can look at most websites and recognize how their pieces are built.

• Change the colors until the site feels like yours.
• Try a different font stack and see how the mood shifts.
• Open other websites, inspect them, and borrow ideas.