Step 3.3 · Style sheet (CSS)

Set up styles.css

Copy your Figma style guide into CSS design tokens, then set the base styles every page shares.

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

Your whole site uses one style sheet, css/styles.css. The starter file is organized into numbered sections. The base styles at the top are for phones; the tablet and desktop changes are at the bottom.

Check the link. index.html already connects the style sheet in the <head>. Paths are case-sensitive: css/styles.css means the css folder, then the file.
site/index.html
```
<link rel="stylesheet" href="css/styles.css">
```
Open styles.css. In VS Code, open it from the css folder in the Explorer. Drag its tab beside index.html to see both files at once.

Replace the design tokens with your Figma colors and fonts:

site/css/styles.css · section 1

/* ===== 1. DESIGN TOKENS =====
   Copy these values from your Figma style guide.
   Change them here once and the whole site updates. */
:root {
  --color-bg: #ffffff;        /* page background */
  --color-surface: #f2f2f2;   /* header, footer and card backgrounds */
  --color-text: #1a1a1a;      /* body text */
  --color-accent: #1f4e79;    /* links, hover and focus states */
  --color-topic-1: #c0392b;   /* one color per topic */
  --color-topic-2: #1f6fb2;
  --color-topic-3: #d4a017;

  --font-heading: 'Playfair Display', Georgia, serif;   /* Google Font #1 */
  --font-body: 'Source Sans 3', Arial, sans-serif;     /* Google Font #2 */

  --space: 16px;              /* side gutter on phones */
  --max-width: 1080px;        /* widest the content gets on desktop */
}

A custom property (a name starting with --) stores a value once. Anywhere you write var(--color-accent), the browser uses that value. Change the token and every use updates.

Read the base and typography sections. Adjust the heading sizes to match your Figma type scale.

site/css/styles.css · sections 2–3

/* ===== 2. BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;     /* padding no longer adds to an element's width */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;            /* 1rem = 16px */
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
}

img {
  max-width: 100%;            /* images never overflow their container */
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
}

/* ===== 3. TYPOGRAPHY ===== */
h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 0.5em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p {
  max-width: 65ch;            /* keeps lines to a readable length */
  margin: 0 0 1em;
}

box-sizing: border-box makes widths include padding, so layouts add up the way they do in Figma.
max-width: 100% on images stops them from spilling off small screens.
max-width: 65ch keeps paragraphs to a comfortable line length (about 45–75 characters).

Read the container section. It replaces fixed widths like width: 1080px:
site/css/styles.css · section 4
```
/* ===== 4. LAYOUT CONTAINER ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;             /* centers the content */
  padding: 0 var(--space);
}
```
max-width lets the column shrink on small screens but never grow wider than 1080 px. margin: 0 auto centers it.
Save and refresh the browser. You should see your fonts and colors.