How Big Is Big? A Simple Guide to Relative Units in CSS

Alright, where were we? Oh right , the cascade, inheritance, and all the stuff around figuring out which style wins.

The C in CSS: How the Cascade Really Works

But now that we’ve got that sorted, let’s look at relative units which can make your styles more flexible.

Relative units

Pixels are probably the easiest unit to work with in CSS, it’s straightforward & predictable. But they’re absolute values.

A pixel is always a pixel. It doesn’t adapt, it doesn’t care about context.

“A starfish in every life is still a starfish. There isn’t a life where a starfish is a professor of aerospace engineering.” Matt Haig, The Midnight Library

And just like that, 10 pixels on any page will always be 10 pixels, no matter the screen, zoom level, or user settings.

How Big Is Big? A Simple Guide to Relative Units in CSS

Other units like em and rem aren’t absolute, they’re relative. That means their values change depending on context. For…