Step 3.4 · Style sheet (CSS)

Style the header, cards and footer

Style each part of the home page to match your Figma components, starting with the phone layout.

You will work in: site/css/styles.css
Learning outcome: CSS for all screen sizes

Work with your browser window narrow (about phone width) while you do this step. You will add the wider layouts in step 3.5.

Header and navigation

site/css/styles.css · section 5

/* ===== 5. HEADER AND NAVIGATION ===== */
.site-header {
  background-color: var(--color-surface);
  padding: var(--space) 0;
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
}

.logo img {
  height: 56px;
  width: auto;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

nav a {
  display: block;
  min-height: 44px;           /* big enough to tap on a phone */
  padding: 10px 16px;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  background-color: var(--color-bg);
  border-radius: 4px;
}

nav a:hover,
nav a:focus-visible {
  color: #ffffff;
  background-color: var(--color-accent);
}

nav a[aria-current="page"] {  /* the page you are on */
  color: var(--color-bg);
  background-color: var(--color-text);
}

display: flex places the logotype and navigation side by side; flex-wrap: wrap lets the navigation drop below the logotype when there isn't room.
gap sets the space between items, like spacing in Figma Auto Layout.
Navigation links are at least 44 px tall, the minimum comfortable size for a fingertip.
:focus-visible gives keyboard users the same highlight as mouse users get on hover.
[aria-current="page"] styles the link to the page you are on. Add aria-current="page" to that link in each page's HTML.

Match the header and buttons to your Figma navigation component: colors, padding, corner radius and the hover and current-page variants.

Home page cards

site/css/styles.css · section 6

/* ===== 6. HOME PAGE ===== */
.intro {
  padding: 32px 0;
}

.topics {
  display: grid;
  /* Fluid grid: as many columns as fit, each at least 250px wide.
     Phone = 1 column, tablet = 2, desktop = 3. No media query needed. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.topic-card {
  background-color: var(--color-surface);
  border-top: 6px solid var(--topic-color, var(--color-accent));
}

.topic-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.topic-card h2,
.topic-card p {
  padding: 0 var(--space);
}

.topic-card h2 {
  margin-top: var(--space);
}

.topic-1 { --topic-color: var(--color-topic-1); }
.topic-2 { --topic-color: var(--color-topic-2); }
.topic-3 { --topic-color: var(--color-topic-3); }

display: grid turns the cards into a grid. repeat(auto-fit, minmax(250px, 1fr)) tells the browser: make as many columns as fit, none narrower than 250 px, and share any leftover space equally. That gives 1 column on phones, 2 on tablets and 3 on desktops with no media query. Step 3.5 explains it in detail.

Each card's top border uses its own topic color through the --topic-color property.

Style the cards to match your Figma topic card component.

Footer

site/css/styles.css · section 8

/* ===== 8. FOOTER ===== */
.site-footer {
  margin-top: 48px;
  padding: 24px 0;
  font-size: 0.875rem;
  background-color: var(--color-surface);
}

Style the footer and add your name, image credits and a contact link to the footer HTML.
Save and refresh. Compare the browser to your Figma phone frame and fix any differences in spacing, size or weight.

Find the code that is styling something

Right-click any element in the browser and choose Inspect. DevTools shows every CSS rule applied to it, and you can test changes live before typing them into your file. See step 5.2.