CSS · Lesson 3 of 7

Colours, fonts & units

Colour formats, fonts and px / rem / % / vw units.

Colours: names (tomato), hex (#ffc107), rgb(255 193 7) and hsl(45 100% 51%). Make sure text has enough contrast against its background.

Fonts: font-family with fallbacks (system-ui, sans-serif), font-size, font-weight, line-height.

Units: px is fixed; rem is relative to the root font size (good for type and spacing); % is relative to the parent; vw/vh are relative to the viewport.

Try it yourself

Code editor

Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.

Key points

Use rem for scalable sizing.
Always add font fallbacks.
Check colour contrast.

Quick check

rem units are relative to…

The parent element The root (html) font size The viewport width Nothing — they are fixed

Practice task

Set the root font size and size all headings with rem so changing one value scales the whole page.

Interview corner

em vs rem?

em is relative to the element's own (or parent's) font size and compounds when nested; rem is always relative to the root html font size.

Why care about colour contrast?

Low-contrast text is hard to read for many people. WCAG recommends at least 4.5:1 for normal text.