CSS units (px, rem, em)
This course explains how CSS sizes work, starting with the difference between absolute and relative units. It covers px as a reference pixel, em and its compounding behavior when nested, and rem as a unit tied to the root font-size. It shows how rem respects the browser's font-size setting that visitors choose. Percentages and viewport units follow, and a final card example applies a strategy for choosing each unit on purpose, property by property.
What you'll learn
- ✓The difference between absolute and relative CSS units
- ✓How CSS defines px as a reference pixel on any screen density
- ✓Why em compounds when nested and where it fits well
- ✓How rem resolves against the root font-size
- ✓How rem font sizes follow the user's browser font-size setting
- ✓What percentages, vw and vh measure against
Absolute vs relative: two kinds of numbers
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.…
Read the full lesson free →Curriculum
7 lessonsAbsolute vs relative: two kinds of numbers
Compares absolute units, which stay fixed, with relative units that depend on a font size, parent or viewport.
px: the absolute unit
Explains px as a reference pixel, how high-DPI screens draw it, and which fixed details suit it.
em: relative to font size
Shows which font-size em refers to, how nested em font sizes compound, and why em suits component padding.
rem: relative to the root
Covers rem as a unit tied to the root font-size, which removes compounding at any nesting depth.
rem and accessibility
Explains how the browser's base font-size setting changes rem values, while px font sizes ignore that setting.
Percentages and viewport units
Introduces percentages, which depend on the parent and the property, and vw and vh, which follow the viewport.
Putting it together: a unit strategy
Walks through a card component and explains the reason for choosing px, rem, em or percentage for each property.