Command Palette

Search for a command to run...

Hectal
Phase 4: Text and Typography
CSS · Exercise 5 of 5 Previous
Intermediate

Typography for a blog page

Declare a web font with @font-face named Brand, using src: local("Georgia") (the preview can't download files) and font-display: swap. Use it for the h1 with a serif fallback.

Turn the navigation list into a plain menu: no bullets and no left padding.

Colour the numbers of the steps list tomato without changing the colour of the step text.

Keep links in the article underlined but move the underline a little away from the text with text-underline-offset.

Write link state rules in the correct order: :link, :visited, :hover, :focus-visible (with an outline), :active.

What Check tests

  1. A @font-face rule named Brand uses font-display: swap
  2. The heading uses Brand first, with a serif fallback
  3. The menu has no bullets and no left padding
  4. The step numbers are tomato, the step text is not
  5. Article links are underlined with an offset
  6. Link states are written in LVHFA order, with a focus-visible outline

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.

Console

Nothing logged yet.