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!

Introduction

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay