What you'll learn
Colour and type set the entire mood of a page. This module covers the ways to express colour, the crucial difference between px, em, and rem, and how to load and control fonts for clean, readable typography.
By the end you'll be able to:
- Write colours in hex,
rgb(), andhsl()with transparency - Choose the right unit for the job
- Use web-safe fonts and load web fonts
- Control size, weight, spacing, and alignment of text
Colours
CSS accepts colours in several formats — they all describe the same kind of value:
.a { color: crimson; } /* named */
.b { color: #2563eb; } /* hex */
.c { color: rgb(37, 99, 235); } /* red, green, blue */
.d { color: rgba(0, 0, 0, 0.6); } /* + alpha (opacity) */
.e { color: hsl(217, 91%, 60%); } /* hue, saturation, lightness */Tip
rgba(), or an 8-digit hex) when you need transparency. HSL is the friendliest to tweak by hand — nudge the lightness to make a colour lighter or darker without changing its hue.Units
Units decide how big things are. The most important distinction is absolute vs relative:
| Unit | Relative to | Use for |
|---|---|---|
px | Nothing (absolute) | Fixed sizes: borders, small precise values |
rem | The root font size | Font sizes and spacing — scales with user settings |
em | The element's own font size | Spacing that scales with local text |
% | The parent's size | Fluid widths and layouts |
vw / vh | The viewport width / height | Full-screen sections, hero heights |
Key idea
rem for font sizes. Because it's based on the root size, a user who increases their browser's default font size scales your whole design up — an important accessibility win that fixed px text takes away.Fonts & web fonts
Set type with font-family, always providing a fallback stack ending in a generic family (serif, sans-serif, monospace) in case a font isn't available. To use a custom font, link one from a service like Google Fonts in your <head>, then name it in your stack:
body {
font-family: "Segoe UI", system-ui, sans-serif;
font-size: 16px;
line-height: 1.6;
color: hsl(220, 15%, 20%);
}
h1 {
font-size: 2.5rem; /* 40px when the root is 16px */
font-weight: 700;
letter-spacing: -0.02em;
}Text properties
A handful of properties control how text is laid out and decorated:
| Property | Controls |
|---|---|
font-weight | Boldness (100–900, or normal/bold) |
line-height | Vertical space between lines (1.5–1.7 reads well) |
text-align | left, right, center, justify |
text-decoration | Underline, line-through, or none (for links) |
letter-spacing | Space between characters |
text-transform | uppercase, lowercase, capitalize |
Recap & quick check
Key takeaways
- Colours can be named, hex, rgb()/rgba(), or hsl()/hsla(); alpha adds transparency.
- px is absolute; rem (root), em (local), % (parent), and vw/vh (viewport) are relative.
- Use rem for font sizes so text respects the user's browser settings.
- Always give font-family a fallback stack ending in a generic family.
- line-height around 1.5–1.7 and a comfortable measure make text readable.
Quick check
1. Which colour format includes an alpha (transparency) channel?
2. Why prefer rem over px for font sizes?
3. What is 1em relative to?
4. Why include a fallback in font-family?
5. Which property removes the underline from links?
Your pages can look polished now. Next we learn the concept that governs all sizing and spacing: the box model.