Your first CSS: the page gets colors

Show me: what CSS is

HTML is the page’s skeleton. CSS is its clothing: colors, fonts, sizes, spacing. It’s written in a separate file and looks like this:

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

Read it out loud like this: “Every h1 heading, color it dark blue. Every p paragraph, make it 18 pixels and dark gray.”

Every rule has three parts:

a selector (h1) – what the rule applies to,
a property (color) – what we’re changing,
a value (darkblue) – what we’re changing it to.

A colon separates the property and value, and every line ends with a semicolon. Watch out for those semicolons – a forgotten one is the most common CSS mistake in the world.

Connecting it: tell your page about your CSS

Inside your my-website folder, create a new file called style.css.
Add this line inside the <head> of every one of your HTML pages:
```
<link rel="stylesheet" href="style.css">
```
This says: “You’ll find this page’s look in the file style.css.”
Test that it’s working – put something impossible-to-miss in style.css:
```
body {
  background-color: yellow;
}
```
Save it, refresh the page. Is it all yellow? It’s working! (Feel free to delete the yellow now.)

Colors in CSS

You can write colors as English words (red, darkblue, lightgray, tomato, gold…) or more precisely as a code starting with a hash sign: #1d4ed8 is blue, #16a34a is green. Mix up any color code you like at htmlcolorcodes.com.

Your turn 💪

Dress up your website in its first colors. In style.css, set:

the background color of the whole page (body),
the color of your headings (h1, h2),
the size and color of your paragraphs (p).

Solutions – of course, feel free to tweak the colors:

🏫 School website – solution

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Blue suits a school website well – it feels trustworthy (that’s why banks use it too!).

🙋 Personal website – solution

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

A personal website can be bolder – warm orange says “this place is alive”.

🌍 Travel journal – solution

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Green like forests and meadows – perfect for a travel journal.

⚽ Club website – solution

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Best pick is your club colors – play in red? Then red it is!

⚠️

Readability rule: dark text on a light background (or the other way around). Light yellow on white is unreadable. When you’re not sure, ask someone: “Can you read this comfortably?”

✅

Check yourself: Your website has its own colors – and because your CSS lives in one file linked to every page, all your pages got colored at once. Pretty clever, right?

What to take away from this lesson

CSS = the look. It’s written in a style.css file, connected with a <link> tag in <head>.
The rule: selector { property: value; } – and don’t forget the semicolons.
One CSS file dresses your whole website at once.