Fonts and classes · Code with Martin

Pick a proper font for your website, and learn about classes – the most useful trick in all of CSS.

Show me: a nicer font

The browser’s default font is boring. Let’s swap it out with one rule for the whole page:

body {
  font-family: Verdana, Arial, sans-serif;
}

font-family is a wish list: “Use Verdana. Don’t have it? Then Arial. Not that either? Then any sans-serif font (sans-serif).”

Fonts nearly every computer has: Verdana, Georgia (has little feet, good for longer text), Trebuchet MS, Courier New (looks like a typewriter). Try a few out – changing the font works wonders on a website.

Show me: classes

So far you can style every paragraph at once. But what if one paragraph needs to look different – like an important notice? That’s what classes are for:

In HTML, give a tag a class name:

<p class="notice">No school tomorrow!</p>

And in CSS, target it with a dot:

.notice {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

background-color – the background color of just that one element
border – a frame: thickness, style, color
padding – space between the text and the border (so the text isn’t glued to the edge)
border-radius – rounded corners

You can put a class on as many elements as you like – they’ll all dress the same way. It’s like a school uniform, but for tags.

Your turn 💪

Set a font for your whole website using font-family on body.
Come up with at least one class that fits your project, and use it in two places.

🏫 School website – solution (a "news" class)

<p class="news">📢 No school on Friday – teacher training day!</p>
<p class="news">📢 Paper drive starts Monday.</p>

body {
  font-family: Verdana, Arial, sans-serif;
}

.news {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

🙋 Personal website – solution (a "favorite" class)

<p class="favorite">⭐ Favorite game: Minecraft</p>
<p class="favorite">⭐ Favorite food: pancakes</p>

body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.favorite {
  background-color: #ffedd5;
  border: 2px solid #ea580c;
  padding: 10px;
  border-radius: 8px;
}

🌍 Travel journal – solution (a "tip" class)

<p class="tip">🎒 Trip tip: head up the mountain early, before it gets hot.</p>
<p class="tip">🎒 Tip: bring water shoes to the beach!</p>

body {
  font-family: Georgia, "Times New Roman", serif;
}

.tip {
  background-color: #dcfce7;
  border: 2px solid #16a34a;
  padding: 10px;
  border-radius: 8px;
}

⚽ Club website – solution (a "win" class)

<li class="win">Eagles – Hawks 3 : 1</li>
<li>Falcons – Eagles 2 : 2</li>
<li class="win">Eagles – Wildcats 4 : 0</li>

body {
  font-family: Verdana, Arial, sans-serif;
}

.win {
  background-color: #dcfce7;
  font-weight: bold;
}

Wins get highlighted in green right away – just like in a real standings table!

✅

Check yourself: Your website has a new font, and at least one element with its own class that looks different from the rest.

What to take away from this lesson

font-family on body changes the font for the whole website.
A class is a name tag: in HTML class="name", in CSS .name { ... }.
padding, border, and border-radius turn a plain paragraph into a nice little colored badge.