DEV Community

Cover image for How To Bake With CSS: Units of Measurement
Patricia Cosma
Patricia Cosma

Posted on

How To Bake With CSS: Units of Measurement

Did you know that great bakers use gram as a unit of measurement for all ingredients in bread? (yes, for water too!)

Even if you might use ml or other units for different recipes in the kitchen, in case you want to make bread, the rules change. Same with CSS! Different scenarios, different rules, different units of measurement.

Let's bake!


The web page you will design is two-dimensional, meaning you will use 2 dimensions to define it. Usually, they are expressed as height & weight.

But these can be expressed in various other ways, depending on your target code: vertical & horizontal, length & breadth, x & y etc.

These dimensions need to be defined using several units of measurement. CSS units are broadly divided into 2 main categories: absolute and relative.

1. Absolute Units

Used on fixed-sized web pages, absolute units are constant across all devices, meaning they are not suitable for all viewport sizes.

Absolute units are best to be used for printing rather than screen output as it is preferable to use them when you know exactly your web page size will be constant.

Absolute Units of Measurement

Out of these, the ones you will come across the most are px and cm.

2. Relative Units

In comparison with the absolute units, relative ones are more suitable for dynamic web pages. They are defined in relation to other elements of the parent element, the viewport or visible web page.

Relative Units of Measurement

When viewport dimension is important, it is recommended to use vw and vh. It might seem over the hand to use relative units at first, but thanks to their scalability properties, they will help a lot in larger projects.

If you want to discover more about CSS values and units, I recommend this reading where you can go more in depth on the subject.

Cover photo by Mae Mu on Unsplash

Top comments (0)

Here is a post you might want to check out:

Regex for lazy developers

regex for lazy devs

Sorry for the callout 😆