2.2 CSS: Styling Your Studio Profile

Last week you built three real pages with real HTML — but right now they look like plain, unstyled text on a white background. That's because HTML only handles structure (what's a heading, what's a paragraph, what's a link). CSS (Cascading Style Sheets) is a separate language that controls how things look — colours, fonts, spacing, layout — without touching your HTML at all. This week you're writing CSS to turn your three plain pages into a site that actually looks like a studio profile. Work through the tasks below in order — each one builds on the last.

Before You Start

  1. Open your 2_web_development folder in VS Code — the same one from last week, in your H: drive. No new download this week; you're building on what you already made.
  2. Check that it still has index.html, about.html, work.html, and a /css folder with a file called style.css inside it. If style.css is missing, create it now: right-click the css folder → New File → name it exactly style.css.
  3. Open style.css and leave it open in a tab — almost everything you do today happens in this one file.

VS Code reminders

  • Auto Save should still be on from last week — check File > Auto Save has a checkmark.
  • Keep Live Preview open on index.html so you see your CSS changes the moment you save.
  • CSS is picky about curly braces { } and semicolons ; — a missing one can stop your whole rule from working. If something doesn't apply, that's the first thing to check.
Monday: your teacher will model Task 1 live, line by line, with everyone typing along — linking the stylesheet and writing your first CSS rules together. That walkthrough is Task 1. Once it's done, you keep going independently through Tasks 2 and 3.

How CSS Works (quick reference)

Every CSS rule has the same three parts. You'll use this exact pattern all week:

selector {
  property: value;
}
  • selector — which HTML element(s) this rule styles. body selects the whole page, h1 selects every heading 1, nav a selects every link inside a <nav>.
  • property — what you're changing, like color or font-size.
  • value — what you're changing it to, like blue or 20px.
  • Every line inside the { } ends with a semicolon ; — even the last one.
Green

Task 1 — Link your stylesheet + set the site-wide look

Right now your style.css file exists but none of your pages know it's there — you have to tell each page to use it. Once it's linked, anything you write in style.css instantly changes all three pages at once, because they all point to the same one file. That's the whole reason CSS lives in its own file instead of inside the HTML.

  1. Open index.html. Inside <head>, right after your <title> line, add: 
    <link rel="stylesheet" href="css/style.css">
  2. Do the exact same thing in about.html and work.html — same line, same spot, in all three files.
  3. Save all three files.
Nothing looks different yet — that's expected. The link just connects the file; it doesn't style anything until you actually write CSS rules inside style.css. That's the next step.

Starter code — add this to style.css

This rule styles the <body> element — since every visible thing on your page is inside the body, this sets the base look for the whole site.

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222222;
}
Customize this: pick your own background-color and color — just make sure your text colour and background colour are different enough to actually read (dark text on a light background, or light text on a dark background).

Your turn — style your headings

Using the exact same pattern as the body rule above, add a new rule below it for h1. Give it a color and a font-size (try a value like 36px to start). 

h1 {
  color: ;
  font-size: ;
}
Reference — properties used on this page:
  • font-family — which font to use. List a backup after a comma in case the first one isn't available.
  • background-color / color — background colour and text colour. Can be a name (blue) or a hex code (#3366cc).
  • font-size — text size, usually in px (pixels).
🟢 Green: opening any of your three pages in Live Server shows your new background colour, text colour, font, and heading style — all three pages match, because they share one style.css.
🔴 Red: nothing changed (check the <link> line is inside <head>, spelled exactly css/style.css, on all three pages), or only one page changed (you forgot to add the link to the others).
Green

Task 2 — Style your navigation bar

Right now your nav links are just plain, underlined text stacked one under another. We're going to turn that into a real horizontal navigation bar — the kind every website has — using a layout tool called flexbox.

  1. In style.css, add a rule for the nav element itself (below your other rules):

Starter code

nav {
  display: flex;
  gap: 20px;
  padding: 10px;
  background-color: #333333;
}

nav a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}
Reference — what each property does:
  • display: flex — the key line. It tells the browser to line up everything inside <nav> in a row instead of stacking it.
  • gap — space between each link.
  • padding — space between the nav bar's edge and what's inside it.
  • text-decoration: none — removes the default underline from links.
  • nav a is a different selector than nav — it only selects the links inside the nav, not the nav bar itself.
Customize this: the background-color on nav and the color on nav a — pick colours that go with the scheme you started in Task 1.

Your turn — add a hover effect

A hover state changes how something looks when the mouse is over it — it's what makes a site feel interactive instead of static. Add this rule, using the same selector as nav a but with :hover added to the end: 

nav a:hover {
  color: ;
  background-color: ;
}

Fill in a color and/or background-color that's different from the normal link style, so students can actually see the change when they move their mouse over a link.

🟢 Green: your three nav links sit in a horizontal bar (not stacked), have no underline, and visibly change colour when you hover your mouse over them.
🔴 Red: links still stack vertically (check display: flex; is on the nav rule, not the nav a rule), or hover does nothing (check you typed nav a:hover exactly, no space before the colon).
Green

Task 3 — Give your content breathing room

Right now your headings, paragraphs, and avatar image are all jammed right up against each other and the edge of the browser window. That's because by default, HTML elements have almost no space around them. We'll fix that using the box model — every element on a page is basically a box, and you can control the space inside the box (padding) and outside the box (margin).

Starter code — style your avatar image

img {
  max-width: 200px;
  border-radius: 50%;
  border: 4px solid #333333;
}
Reference:
  • max-width — stops the image from ever displaying wider than this, so a huge photo doesn't take over the whole page.
  • border-radius: 50% — rounds the corners all the way into a circle. Try a smaller value like 10px if you want rounded corners instead of a full circle.
  • border — a line around the image: thickness, style, then colour, in that order.
Customize this: the border colour (match your scheme), and try switching border-radius between 50% and a smaller pixel value to see the difference.

Your turn — space out your paragraphs and headings

Using the same selector-property-value pattern, add a rule for p that gives paragraphs some breathing room and makes them easier to read: 

p {
  padding: ;
  line-height: ;
}

Try a padding value like 10px, and a line-height around 1.6 (this controls the space between lines of text inside a paragraph — the default is cramped).

🟢 Green: your avatar has a border and rounded corners, and your paragraph text has visible space around it and between lines — the page no longer looks like plain default text.
🔴 Red: the image didn't change (check the selector is img, not image — that's not a real HTML tag), or nothing on the page looks different from before Task 3.
Blue

Centre your page content

Unlocks after all three Green tasks are done.

Right now your content stretches all the way across the browser window, which looks awkward on a wide screen. Professional sites usually keep content in a centred column with space on either side. You'll do this with max-width and a trick called margin: auto — and it only works because your pages already have a <main> tag from Lesson 2.1's Task 4.

Didn't finish 2.1's Task 4? Go back and do it first — wrap your heading + nav in <header> and the rest of your content in <main> on all three pages. This week's task won't work without it.
  1. Add a new rule to style.css for main (this wraps your page content): 
    main {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}
Why this works: margin: 0 auto means "no margin on top and bottom, and automatically split the leftover horizontal space evenly on both sides" — which is exactly what centres a box. It only works because you gave the box a fixed max-width first.

Checkpoint (self-assessed): your page content sits in a centred column with visible space on the left and right on a wide browser window, instead of stretching edge to edge.

Black menu

Pick one or more

CSS variables for your colour scheme

Instead of retyping the same colour everywhere, define it once at the top of style.css: 

:root {
  --accent: #3366cc;
}

Then use it anywhere you'd normally write a colour, like color: var(--accent);. Change the variable once and every rule using it updates at the same time — try it on your nav bar or heading colours.

Doing the dark mode toggle below too? Also add --bg and --text variables here, and use them in your body rule instead of hard-coded colours — that's what makes the toggle work.

Dark mode toggle — CSS only, no JavaScript

You can build a real, working light/dark switch using nothing but CSS. It uses a trick: a hidden checkbox remembers whether the switch is on, and CSS reacts to whether that checkbox is checked.

1. Set up variables first. Do the "CSS variables" item above if you haven't — define --bg and --text in :root, and make sure your body rule uses background-color: var(--bg); and color: var(--text); instead of hard-coded colours. The toggle can't work without this step.

2. Add the switch itself right after your opening <body> tag, on all three pages — before your <header>: 

<input type="checkbox" id="dark-mode-toggle">
<label for="dark-mode-toggle">🌙 Dark mode</label>

3. Add this rule to the bottom of style.css (pick your own dark colours):

body:has(#dark-mode-toggle:checked) {
  --bg: #1a1a1a;
  --text: #f4f4f4;
}

Here's why it works: :has() lets a rule check inside an element instead of just looking at the element itself — so this rule reads "if the checkbox inside body is checked, override these two variables." Because your other rules already pull their colours from var(--bg) and var(--text), the instant those variables change, the whole page follows — no JavaScript needed to make it happen.

Test it for real: :has() is a newer CSS feature — it works in current Chrome, Edge, and Safari, but check that clicking your checkbox actually flips the colours before you call this done. If nothing happens, ask your teacher.

Extra challenge: the checkbox looks like a plain checkbox by default — style the label to look like a real toggle switch instead.

Swap in a Google Font

Add a font link inside <head> on all three pages (pick a font at fonts.google.com and copy its link tag), then update your body rule's font-family to use it instead of Arial.

Caretaker: propose a Studio colour palette

Put together 3–4 colours that could work as a shared accent palette for the Studio Directory page, and share them with your teacher — with a short note on why they work well together.

Handing In Your Work

You already shared your project folder with your teacher back in Lesson 2.1 — you don't need to share it again. Just copy your updated folder into OneDrive, replacing the one that's already there, and your teacher will see this week's progress automatically.

  1. Open File Explorer and go to your project folder on your H: drive — H:\ICT 9\2_web_development\your-slug.
  2. Copy it — right-click → Copy, or Ctrl+C.
  3. Go to your ICT 9 folder in OneDrive, where your your-slug folder already lives from last week.
  4. Paste your updated folder in (Ctrl+V). Windows will ask what to do about the folder that's already there — choose Replace the files in the destination so your latest work overwrites last week's copy.
Common mistake: If you end up with a second folder like your-slug (1) in OneDrive instead of replacing the original, delete the extra copy and paste again, choosing Replace when prompted — otherwise your teacher is still looking at last week's version, not this week's.

Done? Once your updated folder is copied over, you're finished for today — move on to Lesson 2.3.