Lab: Style a Page

Take the semantic HTML from the previous module's lab and apply CSS to match a visual specification — colors, typography, spacing, and basic layout.

You have read about selectors, the cascade, specificity, the box model, and CSS units. Now it is time to apply all of it at once. This lab gives you a semantic HTML document and a visual specification described in prose. Your task is to write the stylesheet that produces the described result.

The starting document

Paste this HTML into a file called index.html. Do not change the markup — the exercise is in the CSS only.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halcyon Bakery</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="site-header">
      <nav>
        <a href="/">Home</a>
        <a href="/menu">Menu</a>
        <a href="/contact">Contact</a>
      </nav>
      <h1>Halcyon Bakery</h1>
      <p class="tagline">Handmade since 1987.</p>
    </header>

    <main>
      <section class="intro">
        <h2>Our story</h2>
        <p class="lead">We started with one sourdough recipe and a borrowed oven.
          Thirty-seven years later we still make everything by hand.</p>
        <p>Our flour comes from a single mill in the valley. Our butter is
          churned weekly. We don't add preservatives — the bread doesn't
          last long enough to need them.</p>
      </section>

      <section class="offerings">
        <h2>What we bake</h2>
        <ul>
          <li>Country sourdough</li>
          <li>Rye with caraway</li>
          <li>Olive and rosemary focaccia</li>
          <li>Seasonal fruit tarts</li>
          <li>Kouign-amann</li>
        </ul>
      </section>

      <section class="hours">
        <h2>Hours</h2>
        <p>Tuesday through Sunday, 7 am to 3 pm.<br>
           Closed Monday. No exceptions.</p>
      </section>
    </main>

    <footer>
      <p>42 Mill Lane &bull; Open Tue&ndash;Sun &bull; &copy; Halcyon Bakery</p>
    </footer>
  </body>
</html>

Visual specification

Create styles.css in the same directory. The finished page should match the following description exactly.

Colour palette

Variable (for your mental model)	Hex value
Background	`#faf8f5`
Surface (header, footer)	`#2c2016`
Surface text	`#f0ebe3`
Body text	`#3a3028`
Accent	`#b35c1e`
Muted	`#8c7b6b`

Type scale

All font sizes use rem. The browser default (16px) is the base.

Element / class	font-size	font-weight	colour
`h1`	2.5rem	700	`#f0ebe3` (surface text)
`h2`	1.5rem	600	`#b35c1e` (accent)
Body text (`p`, `li`)	1rem	400	`#3a3028` (body text)
`.tagline`	1rem	400	`#8c7b6b` (muted)
`.lead`	1.15rem	400	`#3a3028`
Nav links (`a`)	0.9rem	500	`#f0ebe3`

line-height for all body text: 1.65. Headings: 1.2.

Spacing and layout

Apply the border-box reset globally using *, *::before, *::after.
body: background-color of #faf8f5; margin: 0; use a font stack of 'Georgia', serif for the page.
header: background-color of #2c2016; padding: 2rem 3rem; text-align: center.
nav: margin-bottom: 1.5rem. Nav links should have margin: 0 0.75rem and no underline (text-decoration: none). On hover, underline them.
main: max-width: 680px; margin: 3rem auto; padding: 0 1.5rem.
Each section: margin-bottom: 2.5rem.
footer: background-color of #2c2016; color of #8c7b6b; text-align: center; padding: 1.5rem; font-size: 0.875rem.
ul inside .offerings: padding-left: 1.5rem; line-height: 2.

Constraints — these are graded

The following constraints enforce the habits this module taught. Check each one before you consider the lab done:

The box-sizing: border-box reset is the very first rule in your stylesheet.
Every font size is expressed in rem — not px, not em.
No ID selector appears anywhere in styles.css.
No inline style="" attributes were added to the HTML.
!important does not appear anywhere in styles.css.
All styling targets classes or type selectors.
Nav link hover state is handled with the :hover pseudo-class, not a separate class toggled by JavaScript.

Self-review checklist

Once you have a stylesheet that matches the spec, audit it:

Open DevTools and inspect each section. Does the computed font-size match the table above? Are the colours exactly the hex values listed?
Check the box model diagram for main. Does the computed width respect max-width: 680px? Does it have margin: auto on both sides (centred)?
Resize the browser window. With max-width set, the main content should stay centred and stop expanding at 680px, but narrow gracefully on smaller screens.
Validate specificity. In the Styles panel, every rule should show a specificity score of at most (0, 1, 0) (one class) or (0, 0, 1) (one type). If you see (1, 0, 0) anywhere, you have an ID selector in your CSS.

Stuck on a property value? Open DevTools, click an element, and use the Styles panel to live-edit CSS values. Changes you make there are not saved, but they let you experiment instantly. When you find the value that works, copy it into your file.

Extension challenges

Once the spec is matched, try these optional additions without violating the constraints above:

Add a border-bottom in the accent colour under each h2.
Give li items a custom list-style: none and prefix each with an accent dot using the ::before pseudo-element and content: "• ".
Add a smooth colour transition to the nav links: transition: color 0.2s ease.

Each extension should add only class or type selectors to your stylesheet.

Finished reading? Mark it complete to track your progress.

On this page