Step 2.2 · Day 2: CSS design

Create styles.css, fonts and colors

Create your stylesheet, choose your typefaces and palette, and set the base styles for the whole page.

You will work in: css/styles.css and index.html

Create the stylesheet. In Explorer, click the New Folder icon and name it css. Then select the css folder, click New File and name it styles.css.

LastnameFirstInitial_dog-site/ ├── css/ │ └── styles.css ← new ├── images/ └── index.html

Your page already links to css/styles.css from step 1.3, so anything you type here will appear on the page.
Choose two fonts on Google Fonts: a heading font with personality and a highly readable body font. For each, click Get font, then Get embed code, and copy the <link> code.

Paste it into the <head> of index.html, above your stylesheet link. Here it is for Fredoka and Nunito, used in the example:
index.html (inside <head>)
```
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Nunito:wght@400;700&display=swap" rel="stylesheet">

  
  <link rel="stylesheet" href="css/styles.css">
```
The two preconnect lines tell the browser to start connecting to Google’s font servers early, so the fonts load faster. The third line loads the fonts in the weights you chose.

Type your design tokens at the top of styles.css. These are your brand guide: every color and font you will use, stored in one place.

css/styles.css

/* ===== 1. DESIGN TOKENS: my colors and fonts ===== */
:root {
  --cream: #fff8ef;     /* page background */
  --brown: #3b2a1e;     /* text, header and footer */
  --orange: #b4501a;    /* links, buttons, accents */
  --tan: #f3d9b8;       /* light accent */
  --white: #ffffff;     /* cards */

  --font-heading: 'Fredoka', 'Trebuchet MS', sans-serif;
  --font-body: 'Nunito', Arial, sans-serif;
}

Code	What it does
`:root`	Selects the whole document, so these values can be used everywhere.
`--orange: #b4501a;`	A custom property (a variable): a name you choose, starting with two hyphens, and a value. Hex color codes are the same ones you use in Illustrator and Figma.
`'Fredoka', 'Trebuchet MS', sans-serif`	A font stack: if the first font fails to load, the browser tries the next one.
`/* … */`	A CSS comment.

Make it yours

Change the colors to your own palette (try Coolors) and the fonts to the ones you picked. Check that your text and background colors pass the WebAIM Contrast Checker at 4.5:1 or higher. The example’s brown on cream is 13:1 and its orange on cream is 4.9:1.

Type the base styles below the tokens.

css/styles.css

/* ===== 2. BASE: the whole page ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
}

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

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

h2 {
  font-size: 2rem;
  margin: 0 0 1rem;
}

a {
  color: var(--orange);
  font-weight: 700;
}

a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

Code	What it does
`box-sizing: border-box`	Makes an element’s width include its padding and border, so sizes add up the way you expect. `*` means “every element.”
`margin: 0` on `body`	Removes the browser’s default 8px gap around the page edge.
`var(--cream)`	Uses a design token. Change the token once and every rule that uses it updates.
`font-size: 1.125rem`	18px body text: comfortable on screens.
`line-height: 1.6`	Leading: 1.6 times the font size. Tighter (1.2) suits headings.
`max-width: 100%` and `height: auto` on `img`	Images shrink to fit their container and keep their proportions. This is the first rule of responsive images.
`margin: 0 0 1rem`	Shorthand for top, right and left, bottom: no space above, 1rem below.
`a:focus-visible`	Shows a clear outline when someone reaches a link with the `Tab` key, so keyboard users can see where they are.

Save and look. The page now has your background color and fonts, and the photos fit the window.

Need help changing a value or adding a new declaration later? See Editing CSS rules in Tips and tutorials.