Absolute vs relative: two kinds of numbers

Not every 16 means the same thing

Write font-size: 16px on one element and font-size: 1rem on another. With default browser settings, both render 16 pixels tall. Change one setting, like the user's font-size preference or a parent's font size, and they stop matching. One is a fixed number, and the other depends on something else. That difference is what this course is about.

Absolute units: a fixed measurement, every time

An absolute unit describes a size that never depends on anything else in the document. 1px is 1px next to a heading, inside three nested <div>s or anywhere else on the page.

.box {
  width: 200px;
  border: 1px solid black;
}

px (pixels) is the absolute unit you'll use nearly all the time. CSS also defines cm, mm, in and pt, borrowed from print. They rarely appear in web stylesheets, because screens aren't paper.

Relative units: a size that depends on context

A relative unit describes a size as a ratio to something else: a font size, the viewport or a parent element. The same declaration can compute to different pixel values depending on where it's used.

.box {
  font-size: 1.5em;   /* 1.5× some other font size */
  padding: 2rem;      /* 2× the root element's font size */
  width: 50%;         /* half of the parent element's width */
}

Relative units follow strict, learnable rules. They just reference a moving target instead of a fixed number. The next three lessons cover em and rem, the pair you'll see constantly in font-size and spacing. Percentages and viewport units come near the end.

Why bother with relative units at all

If a relative unit computes to a pixel value anyway, why not write the pixels? Two reasons drive most decisions in this course. The first is scaling together: size a component in relative units, and changing one root value resizes everything. The second matters more: respecting the user. Browsers let visitors set their own base text size, and relative font sizes follow that choice. A page built in fixed pixels ignores it. Lesson 5 goes deeper.

What this course covers

• Lesson 1, Absolute vs relative (two kinds of numbers): a fixed measurement versus a size that depends on context (you are here)
• Lesson 2, px, the absolute unit: what a "pixel" means to a browser
• Lesson 3, em, relative to font size: the compounding surprise it causes when nested
• Lesson 4, rem, relative to the root: the fix for em's compounding problem
• Lesson 5, rem and accessibility: why relative font sizing respects a user's own preferences
• Lesson 6, Percentages and viewport units: two more relative units you'll encounter constantly
• Lesson 7, Putting it together: a practical strategy for choosing a unit deliberately

By the end, reaching for px, em, or rem will be a decision, not a habit.