Making Sense of Units in CSS

Texts have to be sized. Images have to be sized. Calculated spacing also have to be measured. Point is, this is important stuff as there is no sizing without measurement. Equally, there are no measurements without units. In this section, we will begin by introducing CSS units.

Beginning Units

You are likely familiar with measurement units such as the centimeter, millimeter, and inches etc. CSS has so many units. I do NOT intend teaching all of it.

In this course we will cover all the units you are likely to see around.

Below are the units we will be taking a look at:

  1. Pixels (px)
  2. Points (pts)
  3. Picas (pc)
  4. Ems (em)
  5. Rems (rem)
  6. Exes (ex)
  7. Percentages (%)
  8. vmin and vmax
  9. Viewport height (vh) and width (vw)

In case you were wondering, a simple use case for units would be like so:


h1 {
	font-size: 12px
}

For this example, I have used the unit, pixels i.e The code says, _ give the font a size of 12 pixels._

Now let’s start taking a closer look at these units in the next lesson.

Get hands-on with 1200+ tech skills courses.