CSS Units
Tags: beginners, css
Published: 2019-10-29 19:51:16

---
title: CSS Units
published: true
description: A beginners guide to CSS units
tags: beginners, css
series: FrontEnd Development Zero to Hero
---

Almost everything you can think of has a unit of measurement e.g 2Mbs, 2 Pounds of flour e.t.c. You should not be surprised when I tell you that there are some mathematical units of measurement that are found in CSS and if you have a thing for math you will find these units comforting and if otherwise, am sorry, you kind of have to know them, but that does not mean you will use them all the time. Lucky you!.

When you read the term "mathematical units of measurement" in the last paragraph, you might be thinking: "Don't tell me I'll have to do math in CSS", _hmmmmm_, Yes! Of course, but not the likes of Quadratic Equation or Polynomials. The math you will be doing is mostly to ensure:

* Page elements fit in the position you want them
* Page layout is consistent
* The text on your web page is readable in varying devices e.t.c

There are varying units in CSS, they have their ups and downs and they all have specific cases when you can use them in your web page. Some units are best used with font sizes, some are best suited to borders and some are good candidates in media queries.

In CSS, units are categorized into two types:

1. Relative Units
2. Absolute Units 

####__RELATIVE UNITS__
Relative length units specify a length relative to another length property. Examples are:

* `em`
* `rem`
* `vmin`
* `vmax`
* `vw`
* `vh` 
* `ch`
* `ex`
* `%`(percentage)
* `lh`

####__ABSOLUTE UNITS__
Absolute length units are fixed in relation to each other. Examples include:

* `in`
* `cm`
* `mm`
* `pt`
* `pc`
* `px`

Now, we'll briefly explain some of these units and give recommendations on where and when they are best used in a web document.

_To follow along with the code snippets in this post, create a new Skeleton file with a `div` and a paragraph, save it with any name you like, preferably_ __css_units.html__, _create a new CSS file and save it as_ __css_units.css__ _and make sure it's linked with the html file as depicted in the code snippet below. The rest of this post will assume you already created this skeleton html and css file (unless otherwise stated)_.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Units</title>
  <link rel="stylesheet" href="css_units.css">
</head>
<body>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</body>
</html>
```

Copy and Paste the following declaration in your CSS file:

```css
div {
  font-size: 3em;
}
```

Save both files.

<hr>

__I have made some assumptions in the explanation below. That:__
* Your browser still has its default `font-size` set to `16px`
* You update your CSS or HTML skeleton files to match the code snippet under each explanation
* You are using the latest version of Firefox or Chrome as of October 2019 

_All screenshots in this post are from Firefox 70, if you are using Chrome your output will be slightly different but you can still follow along_.
 
<hr>


####__em__
[The Specification]( https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units) states:

> The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the font-size' property itself, in which case it refers to the font size of the parent element.

__This translates to__: When the `em` is used as a unit for an element, the value you specify is the same as the value the browser will calculate for the element's `font-size` in `px`. But there is a catch in what the specification states, which is the second part of the statement:

> __...  The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.__

__What this means is that__: if you specify the `font-size` of an element in `em`, the `em` will be calculated by the browser with respect to the parent's `font-size`. Say What? Let's explain with some code and images.

Load your skeleton file in your browser. Right-click on the paragraph text and click on "Inspect Element" from the context menu:

![Inspect Element in Firefox](https://thepracticaldev.s3.amazonaws.com/i/op3wlfytc5llihmp2srj.PNG)

By default the browser Developer Tools is docked to the bottom of the page in Firefox, mine is docked to the right. If you will like this, click on the 3 dotted symbol " __...__ " towards the top-right corner of the Developer Tools and click on "Dock to Right". The image below sums this up nicely:

![Devtools in Firefox Docked to the Right](https://thepracticaldev.s3.amazonaws.com/i/3kdfgx8a5pgtjcf1rdm2.PNG)

Your Developer Tools should now be docked to the right similar to the image below:

![DevTools in Firefox](https://thepracticaldev.s3.amazonaws.com/i/fcrcq2ln6qxz6cwpt6py.PNG)

You will notice in the __Rules__ tab that the paragraph has no `font-size` of its own but it's using the `font-size` of its parent which is `3em` and the browser says it's "inherited from div" ( inheritance will be discussed in a future lesson). If you switch over to the __Computed__ tab, you'll notice that the browser  calculated a `font-size` of `48px`:

![Computed Font Size in Firefox DevTools](https://thepracticaldev.s3.amazonaws.com/i/15p87l9vyzvjmam11xk8.PNG)

Now, the question is: How did the browser arrive at `48px`? Let's do some math!

Most browser have default values for most HTML Elements, for most browser, the default value for the `font-size` is `16px`. And in CSS `1em` is equal to `16px`. So we have:

* `1em` = `16px`
* `3em` = _3_ * `16px` = `48px` (the computed value by the browser)

Now let's demonstrate the "exception" the specification mentioned.

Add the following declaration to your CSS file:

```css
p {
  font-size: 2em;
}
```
Save your file, and refresh your browser. The `font-size` of the paragraph will be enormous, and if you use "Inspect Element" on it, you will notice that the browser is now using the `font-size` you specified i.e `2em` and it ruled out the `font-size` of the parent element, the `div`.

But that does not mean the browser is not using the ruled out value. Switch over to the __Computed__ tab you'll see the browser calculated a computed value of `96px` for the paragraph. What? Why? How? Let's do some math.

Remember that by default:

* `1em` = `16px`

Which means our parent element `font-size` in 'em' will be multiples of `16px`, so we have:

* `2em` = `32px`, which is _2 * 16_
* `3em` = `48px`, which is _3 * 16_.

Now if you recall, we gave our `div` element a value of `3em`. And the spec says:

> __...  The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.__

This is exactly what we did, we gave our paragraph a `font-size` specified in 'em' and the browser will now calculate its `font-size` relative to the `font-size` of the parent element, in this case, the `div`.

So here is the thing:

* We gave our `div` element a `font-size` of `3em`, which the browser computes to `48px`
	* It's the same as _3 * (browser default `font-size`)_
* We gave our paragraph a `font-size` of `2em`, which means 2 multiplied by the parent `font-size`, in our case `3em`
	* It's the same as _2 * 3em * (browser default `font-size`)_ or
	* _2 * `48px`_

* _2 * 3 * 16_ will equal _96_
* _2 * 48_ will equal _96_

That's how the browser computed the `96px` when we specified the `font-size` as `2em`. Now you might be thinking, if we can increase the font size can we decrease it? Of course!, make sure the value you specify as your 'em' value is less than one (1) when you do this the browser will do some division along with the routine multiplication.

So, if you change the `font-size` of the paragraph to `0.65em`, in math `0.65`  can be written as `65/100` so the browser will calculate the `font-size` as:

* _65/100* (browser default) * (parent `font-size`)_
* _65/100 * 16 * 3_ => _(65 * 16 * 3)/100_ => _3120/100_ => _31.2_

Go ahead, give it a try. 

####__rem__
The `rem` unit was introduced in CSS3 and it stands for "root em". The `em` unit is relative to the `font-size` of the parent, which causes the compounding issue. The `rem` unit is relative to the root element.

The root element in HTML is the `html` element itself, which means we can define a single font size on the `html` element and define all `rem` units to be a percentage of that.

Given the CSS code snippet below, we defined the `html` `font-size` as `65.2%`. Now, you might ask `65.2%` of what exactly?. The browser default `font-size` of `16px`. Update your CSS file to match the snippet below:

```css
html {
  font-size: 62.5%;
}
```
Save your CSS file and load it in your browser. The `font-size` of the paragraph will be small. Using "Inspect Element", you will realize the browser computed a `font-size` of `10px`. How? Let's find out.

![Computed Font Size in Chrome](https://thepracticaldev.s3.amazonaws.com/i/dvp7uz1fmbdzmt87usyu.PNG)

In Mathematics `65.2%` is the same as `65.2/100` which can be written as `0.652`. And when you hear a phrase like "`2% of 100`" it's the same as saying "`2% multiplied by 100`". Why multiplication? When the word "of" appears in the context of numbers in math its means multiplication, so when I mentioned earlier that "_`65.2%` of the browser default font-size_" its the same as "_`65%` multiplied by the browser default font-size_". Which is:

* `65.2%` * `16` or
* `0.652` * `16`

The calculation above equals `10`, which is the same value computed by the browser. This value is now the `root em`.

If we apply the following declaration to our paragraph, the browser will compute a value of `14px`.

```css
p {
  font-size: 1.4rem;
}
```
In the code snippet above:
* `1.4rem` means "_`1.4` of the root em_"
* This can be written as "_`1.4` * `10`_".
* Which equals `14`.
 
####__vmin and vmax__
These units work with the width and height of the viewport which is actually the available browser window. The difference between these units are:

* `vmin` selects the minimum value between the height and width
* `vmax` selects the maximum value between the height and width

For example if the viewport has a width of `1440px` and height of `800px`:

* `50vmin` will be `50%` of the height which equals `400px`
* `50vmax` will be `50%` of the width which equals `720px`

Let's take some examples. Update your CSS file to match the snippet below:

```css
div {
  border: 2px solid #1560bd;
  width: 50vmax;
}
```
Given the code snippet above, the width of the `div` element will change depending on the viewport height and width. To see this in action:

* Use the browser "Inspect Element" on the `div` element, this will open the Developer Tools
* Switch to the __Computed__ tab and take note of the computed `width`
* Resize the Developer Tools window or browser Window.

You will observe the `width` will change if you get to a certain window size or height.

![CSS vmin and vmax demonstrated in Firefox By resizing the Browser window](https://thepracticaldev.s3.amazonaws.com/i/8kyfdpqcx3k9ui3qe0pm.PNG)

Update the unit in the `width` property and repeat the steps above.

```css
div {
 border: 2px solid #1560bd;
 width: 50vmin; /* like this */
}
```
####__vh and vw__
vh and vw stands for:

* viewport height
* viewport width

These units are similar to `vmin` and `vmax` and they are equivalent to `1%` of the viewport's height and width.

Update your CSS file to match the snippet below:

```css
div {
  border: 2px solid #1560bd;
  width: 50vh;
}
```
Repeat the experiment under the `vmin` and `vmax` by resizing your browser window and observe the computed width in the Browser Developer Tools.

####__ch__
From the [Mozilla Developer Network]( https://developer.mozilla.org/en-US/docs/Web/CSS/length):

> Represents the width, or more precisely the advance measure, of the glyph "0" (zero, the Unicode character U+0030) in the element's font. Update your CSS file to match the code snippet below:

Update your CSS file to match the snippet below:

```css
div {
  font-size: 1ch;
  border: 1px solid black;
}
```
Save the code, and load the file in your browser, Use "Inspect Element" on the paragraph. In Firefox and Chrome the computed `font-size` is `8px` and If you use Internet Explorer the computed `font-size` is `16px`.  

![The ch unit demonstrated in Firefox](https://thepracticaldev.s3.amazonaws.com/i/ihrohw8qnvfu2mply7a1.PNG)

####__ex__
The 'ex' unit is similar in behavior to the 'em' unit, but the 'ex' unit has to do with an element's height.

[The specification](https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units) states:
> The 'ex' unit is defined by the element's first available font. The exception is when 'ex' occurs in the value of the 'font-size' property, in which case it refers to the 'ex' of the parent element.

__This translates to__: If the 'ex' unit is used on an element, the height computed by the browser will depend on the available font. And if used directly as the `font-size` unit of an element it will be calculated relative to the parent's height.

So, by default:
* `1ex` = `7.15px`

Which means our parent element `font-size` specified in 'ex' will be multiples of `7.15px`:

* `2ex` = `14.3px` which is _2 * 7.15_
* `3ex` = `21.45px` which is _3 * 7.15_

Now, when we give our paragraph a `font-size` in 'ex', the browser will calculate the `font-size` relative to the parent's height. And this value will vary depending on the first available font. First available font? Let's explain that with code and some images.

We will be using our previous code samples with a slight modification. Update your CSS to match the code snippet below: 

```css
div {
  font-family: "Times New Roman","Trebuchet Ms", Helvetica, Verdana;
  font-size: 3ex;
}

p {
  font-size: 1ex;
}
```

Save and load the file in your browser. The `font-size` will be very small, this is because the `font-size` is calculated based on the height of the first available font in our case its `Times New Roman`. Use "Inspect Element" on the paragraph, navigate to the __Computed__ tab, and check out the `font-size`, it should be similar to the image below:

![CSS ex unit in Firefox DevTools](https://thepracticaldev.s3.amazonaws.com/i/xq4t6o7f3jeb4ejd1pci.PNG)

Now, update the `font-family` property by removing the first font "`Times New Roman`", which will leave you with `Trebuchet Ms`, `Helvetica`, and `Verdana`, Save the file and reload it in your browser. Check out the __Computed__ tab, the `font-size` will be different.

![CSS ex unit in Firefox Devtools](https://thepracticaldev.s3.amazonaws.com/i/udib5n6nkpoikjml3cb9.PNG)

If you remove `Trebuchet MS`, save and reload the file. The computed `font-size` will be different.

![CSS ex unit in Firefox DevTools](https://thepracticaldev.s3.amazonaws.com/i/wrn42vn9kg7dnkl8bxxp.PNG)

####__%(percentage)__
Understanding the percentage unit is quite straightforward, it measures relative to the parent length. So, when the parent width is 900px then 50% would become 450px.

Update you skeleton html and CSS files to match the snippet below:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Units</title>
  <link rel="stylesheet" href="css_units.css">
</head>
<body>
  <div class="parent">
    <div class="child">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</body>
</html>
```
```css
.parent {
  width: 70%;
  margin: 0 auto;
  padding: 0.7em;
  border: 2px solid #1560bd;
}

.child {
  width: 50%;
  border: 2px solid #ea3c53;
  padding: 0.7em;
}
```
Save you files and load (or refresh) in your browser, you should get an output similar to the image below:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/52ag1mipj6ac81j7scl2.png)

The `.child` class will always be `50%` of `.parent` irrespective of the viewport. Try resizing your browser window.


The remaining units are absolute length units and are generally considered to always be the same size.

* `in`: inches — 1in is equal to 2.54cm.
* `cm`: centimeters
* `mm`: millimeters
* `pt`: points — the points used by CSS are equal to 1/72nd of 1in.
* `pc`: picas — 1pc is equal to 12pt.
* `px`: pixel units — 1px is equal to 0.75pt.

We did not discuss the `lh` unit because it's experimental as of October 2019 and not widely supported as depicted in the [caniuse](https://caniuse.com/#search=lh%20unit) image below:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/61qdlmfsencwbzwouh5h.png)

Next, CSS Specificity.