Phase 3Beginner4 of 12 in CSS

Values, Units and Colours

Pixels, em, rem, %, ch, viewport units, every colour format from hex to oklch, CSS variables and calc/min/max/clamp, explained from zero.

Every CSS declaration ends in a value: 16px, 1.5rem, 50%, #2563eb, var(--brand), clamp(1rem, 2vw, 2rem). This phase teaches what those values really mean, so you choose them on purpose instead of copying them.

You'll start with the CSS pixel and why it is not a dot on your screen, then the relative units (em, rem, %, ch, ex) that let a design grow with the reader's font size, and the viewport units (vw, vh, dvh and friends) with the famous mobile address bar problem.

Then colour: names, hex, rgb(), hsl(), transparency, currentColor, and the modern tools (oklch(), color-mix(), relative colours, contrast). You'll finish with custom properties (CSS variables) for theming and the maths functions calc(), min(), max() and clamp() for fluid, responsive sizes.

0/7 · 0%

7 topics ~3 h 23 code blocks & diagrams

Start with the first topic

3.1

Pixels and Absolute Units

A CSS pixel (px) is an agreed reference size, not one dot on your screen; the browser maps it to real device pixels using the device pixel ratio, and every other absolute unit (in, cm, mm, pt, pc) is a fixed number of CSS pixels.

21 min 3 code practice

3.2

Relative Units

Relative units measure against something else: em against the font size, rem against the root font size, % against a property-specific reference, and ch/ex against the font's own letters; choosing the right reference makes designs scale with the reader.

27 min 4 code practice

3.3

Viewport Units

Viewport units size things as a percentage of the browser window: vw and vh for width and height, vmin/vmax for the smaller or larger side, and svh, lvh and dvh to cope with mobile address bars that appear and disappear.

21 min 3 code practice

3.4

Colours

CSS can write the same colour many ways (names, hex, rgb(), hsl()), add transparency with an alpha value, follow the text colour with currentColor, and erase colour with transparent; the browser turns them all into the same red, green and blue numbers.

21 min 3 code practice

3.5

Modern Colour

oklch() describes colour by how light it looks, how colourful it is and its hue, reaching the vivid colours of modern screens; color-mix() blends two colours, relative colour syntax derives new colours from an existing one, and contrast ratios tell you whether text is readable.

23 min 4 code practice

3.6

Custom Properties

Custom properties (CSS variables) are properties you name yourself, like --brand, read with var(--brand, fallback); they inherit down the page like color does, so redefining one on a parent re-themes everything inside it.

26 min 3 code practice

3.7

CSS Maths Functions

calc() does arithmetic with mixed units, min() and max() pick the smaller or larger of several values, and clamp(MIN, PREFERRED, MAX) keeps a fluid value between limits; together they make sizes that adapt smoothly without media queries.

26 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

Paint with three colour formats

Style the page using three different colour formats.

Beginner

A type scale in rem

Give the page a type scale that respects the reader's font-size setting. At the default root size of 16px, the .display heading should be 40px, the .lead paragraph 20px and the .fine print 14px.

Beginner