# CSS Units
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
```
```css
.absolute {
background-color: green;
width: 640px;
height: 100px;
}
.relative {
background-color: red;
width: 90%;
height: 6em;
}
```
%[https://codepen.io/adiati/full/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
```
```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
Hello World
```
```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*.
%[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.
%[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! 😊