CSS Units
Tags: css, todayilearned, beginners, codenewbie
Published: 2020-11-08 15:23:00

Hello Fellow Codenewbies 👋,

There are many factors to consider when we think about responsiveness in CSS.
One of them is [CSS Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units).

There are two types of units:
1. Absolute
2. Relative - to the size of **font** (em, rem, etc.) and **viewport** (vh, vw, etc.)

## Absolute Unit
   Regardless of its parent's or screen size, absolute units are always the same size.
  ***px***, ***cm***, ***inch***, etc. are within this category.

```html
<body>
  <div class="absolute"></div>
  <div class="relative"></div>
</body>
``` 

```css
.absolute {
  background-color: green;
  width: 640px;
  height: 100px;
}

.relative {
  background-color: red;
  width: 90%;
  height: 6em;
}
``` 

{% codepen https://codepen.io/adiati/pen/gOMdVpG %}
Try to shrink and expand the window and see the difference in the above example.

## Relative Unit

### Percentage
The percentage is mainly used for widths, and it is relative to the target element's parent.

```html
<body>
  <header>
    <h1>Hello World</h1>
  </header>
</body>
``` 

```css
header {
  width: 80%;
}

h1 {
  width: 50%;
}
``` 

In the above example, the width of the `header` is 80% of the `body`.
And the width of `h1` is 50% of `header`.


### em
`em` inherits size from its parent.

```html
<div class="container">
  <h1>Hello World</h1>
</div>
``` 

```css
.container {
  font-size: 12px;
}

h1 {
  font-size: 2em;
}
``` 

The font size of `h1`is 2x its parent (`container`), making it 24px.

But there is one problem with `em`.
Because it is relative to its parent, it can create a *cascading effect*.

{% codepen https://codepen.io/adiati/pen/GRqXeyj %}


Click the CSS button on the CodePen to see the code.
As you can see in the result, the fonts of `li` are bigger than `h1`. But their font size is smaller than `h1`.
How does this happen?

Let's break them down.

- We set the font size of `body` as the parent of `h1` and `ul` to 18px.
- Then we set the font size of `h1` to 2em. It now makes the font size of `h1` twice bigger than `body`.
- Let's leave `h1` and move to its sibling, `ul`. We set its font size to 1.5em. As you can guess, the size of the `ul` is now 1.5x bigger the parent.
- Then we set the font size of `li` to 1.5em. It makes `li` now 1.5x bigger than `ul`.
  Remember that `ul` is already 1.5x bigger than `body`. So, `li` is 3x bigger than its grandparent, the `body`.

When it's about `font-size`, we better avoid the use of `em` and use `rem` instead.

### rem
`rem` stands for "root element," and it is always relative to the "root" of the document, which is the `html` element.

{% codepen https://codepen.io/adiati/pen/abZaMGr %}

Because we use `rem`, even though the font size of `body` is 50px, all font size is changed relative to `html` as the root element.

## Picking Which Unit To Use

It depends on your personal preference and what you need, but here is a reference of approaches on when to use one:

- font-size: `rem`
- margin and padding: `em`
- width: `em` or `percentage` or absolute unit such as `px`

---

Thank you for reading!
Last, you can find me on [Twitter](https://twitter.com/@AdiatiAyu). Let's connect! 😊