CSS — Style the Page

CSS is what gives HTML style. Same skeleton, many outfits.

CSS Syntax

Every CSS rule has the same shape:

selector {
  property: value;
}

A real example:

h1 {
  color: #1a1a1a;
  font-size: 3rem;
}

• Selector — what you're styling (here, every <h1> on the page).
• Property — the thing you're changing (color, font-size, and so on).
• Value — what you're changing it to (#1a1a1a, 3rem).

Selectors come in a few flavours. h1 targets every <h1> tag. .hero (with a dot) targets any element with class="hero". Class selectors are how the starter code styles specific parts of the page without affecting everything.

When two rules try to style the same thing, the more specific one wins — a class beats a plain tag, and .hero h1 beats just .hero. That's the "cascade" in CSS. You don't need to memorize the rules today, just know that order and specificity matter when something looks off.

Step 1 — Paste the starter CSS

Head back to the Starter Code page, copy the entire CSS block, and paste it into CodePen's CSS pane (the top-middle one). The plain page should snap into the styled magazine layout.

Step 2 — The theme block (variables)

Scroll to the top of the CSS to the :root { ... } block:

:root {
  --bg: #f2ede3;
  --paper: #fffaf0;
  --ink: #1a1a1a;
  --accent: #ff4d1f;

  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", -apple-system, sans-serif;
}

These are CSS variables. Each one holds a value used in many places. Change it once here, the whole page updates.

Reading color codes

The values starting with # are hex codes — six characters packing red, green, and blue into one string.

• The first two characters are the red channel, the next two green, the last two blue.
• Each pair runs from 00 (none) to ff (max).
• So #000000 is black, #ffffff is white, #ff0000 is pure red. #ff4d1f is lots of red, a little green, almost no blue — that warm orange in the starter accent.
• #fff is shorthand for #ffffff (each character doubles).

CSS accepts a few other color formats you'll bump into out in the wild:

Hex is what the starter uses, and it's all you need today. To invent your own colors, grab a hex from a picker and paste it in.

Reading font stacks

Look at the --serif variable:

--serif: "Fraunces", Georgia, "Times New Roman", serif;

That's not one font; it's a fallback list. The browser tries Fraunces first. If Fraunces hasn't loaded yet (slow internet, blocked CDN, font file missing), it tries Georgia next, then Times New Roman, then whatever generic serif the user's machine has installed. Always end the list with a generic family so something always renders.

The generic families describe the broad shape of a font:

• serif — letters have little feet at the ends. Reads editorial and classic. Fraunces, Georgia, Times.
• sans-serif — no feet, cleaner shapes. Modern and neutral. DM Sans, Inter, Arial.
• monospace — every character takes up the same width, so columns of code line up. Courier, Menlo.

The starter pairs a serif (Fraunces) for the big magazine headings with a sans-serif (DM Sans) for body copy. The contrast between the two is what gives the page its editorial feel — pick fonts that look different from each other or the page will read flat.

You'll also see two font-related properties scattered through the CSS:

• font-weight controls thickness. 400 is normal, 700 is bold, 900 is the heaviest the font supports. Look at .hero-title to see 900 in action.
• font-style: italic slants the text. That's what gives the project years and the contact links their handwritten lean.

Try it

Change --accent from #FF4D1F to #2E5BFF (blue). Watch which parts of the page change as you save.

Now pick an accent color that feels like you. Suggestions:

• Blue: #2E5BFF
• Green: #14A05A
• Yellow: #FFB800
• Pink: #FF4D8B
• Purple: #7C3AED

Or grab one from a colour picker:

Step 3 — Walk the stylesheet

Scroll through the CSS top to bottom. You don't need to memorize, just notice what each block does:

• Reset (* { ... }) — wipes the browser's default spacing so we start clean.
• Body — the whole page lives in a 720px-wide column, centered. The layout doesn't sprawl across a wide screen now.
• Hero / Cover — big bordered box, magazine-cover vibe. The clamp() on the title makes the font shrink on small screens automatically.
• Sections — each section is a card with a number badge floating off the top-left corner. The accent section (section--accent) inverts the colors.
• Skill tags — display: flex + flex-wrap: wrap puts the skills in a row that wraps to a new line if there isn't space. The :hover rule with transform: rotate(-2deg) is the playful tilt — try hovering on one.
• Highlights / Projects — each project is a display: flex row: year on the left, text on the right.
• Footer — inverted colors (black background, cream text) so it feels like the back of the magazine.
• Mobile (@media (max-width: 500px)) — below 500 pixels wide, the project layout switches from year-on-side to year-on-top. That's responsive design. Resize your CodePen preview pane to see it kick in.

Step 4 — Try a second variable change

You've changed the accent. Try changing one more variable for a different vibe:

Dark mode — replace the four colors at the top with:

--bg: #1a1a1a;
--paper: #2a2a2a;
--ink: #f2ede3;
--accent: #ffb800;

Soft pastel:

--bg: #ffe5e5;
--paper: #fff5f5;
--ink: #2a1a1a;
--accent: #ff7ba9;

High-contrast editorial:

--bg: #ffffff;
--paper: #ffffff;
--ink: #000000;
--accent: #ff0000;

By the end of this step, no two pages in the room should look identical.

Stretch challenges

• Custom font pair. Browse fonts.google.com, pick two fonts, replace the names in the @import line at the top of the CSS and in the --serif / --sans variables. Pairings that work: Inter + Playfair Display, Lato + Oswald, Nunito + Fraunces.
• Contrast check. Paste your --ink and --bg hex codes into webaim.org/resources/contrastchecker — aim for "AA" or better. If your accent on cream is failing, try a darker accent.
• Read the cascade. Right-click any element → Inspect. The Styles panel on the right shows every CSS rule applied to that element, in order, with the winning rule on top.