CSS Units Tutorial
Tags: css, writing, tutorial, beginners
Published: 2022-07-25 18:04:00

In this tutorial, we’re going to learn about CSS units!

We use units (`px`, `em`, `rem`, percentages, `vw`, `vh` etc) to determine the size to apply to properties such as length, padding, margin & align.

Learning about each unit type will help you create more flexible & manageable stylesheets!

## What is a CSS Unit?
A CSS unit determines the size of a property you’re setting on an element.

For example, to set the `padding` on a paragraph, we could choose `10px` like so:
```css
p {
  padding: 10px;
}
```
The value ‘10px’ includes the CSS unit ‘px’ (or pixel).

The question is: Is `px` the best unit to use? What about `em`, or `rem`, or `vw`?

Let’s find out!

### Pixels
```css
.element {   
  width: 500px;  
}
```
Pixels are the most common measurement unit. Allowing you to set a length in “pixels”.

Interestingly, they don’t have anything to do with the literal screen pixels of your display device. It’s a standardization of measurement used across the web.

As we’ll see, pixels lack flexibility in some scenarios & there is often a better option.

### Percentages
Percentages let you specify values as a percentage, relative to the same property in the element’s parent. For example:
```css
.parent {
  width: 600px;
}
.child {
  width: 50%;  /* 300px */
}
```
So if a parent element has a width of 600px, a child element with a width of 50% will render at 300px.

### Font-relative units

#### Em

```css
.element {
  width: 30em; 
}
```
`em` is the value assigned to the element’s `font-size`, so its exact value changes between elements. The measurement itself the width of the `m` letter.

Note that the length changes **only** when you change the `font-size`, it won’t change if the `font-family` is adjusted.

By default `1em` is equal to `16px`.

If any CSS changes the font size, 1em becomes equivalent to whatever the new `font-size` is.

#### Rem

```css
.element {
  width: 30rem; 
}
```
`rem` is similar to `em`, only instead of changing based on the font size of the current element, it changes based on the the root (i.e. `:root {}`) element font size.

This way you can set `font-size` once, and `rem will be a consistent measurement throughout all pages!

#### ex

```css
.element {
  width: 40ex;
}
```
`ex` is similar to `em`, however it's based on the height of the `x` letter.

And unlike `em`'s, it can change depending on both the `font-family` used & on the `font-size`.

#### ch

```css
.element {
  width: 40ch;
}
```
`ch` is like `ex` only instead of measuring the height of `x` it measures the width of `0`(the number zero).

It also changes as the `font-family` changes.

### Viewport units

#### vw

```css
.element {
  width: 20vw;
}
```
The viewport width unit represents a percentage of the users’ viewport width.

So `50vw` is equal to 50% of the width of the viewport.

It’s similar to percentage, only the value remains consistent regardless of the value held by the parent elements. Similar to the way that `rem` units remain relative to the root.

`vw` units are often used for sizing responsive type.

#### vh

```css
.element {
  width: 20vh;
}
```
The viewport height unit represents a percentage of the users’ viewport height.

`50vh` equals 50% of the height of the viewport.

This is the same as `vw` only it’s based on height instead.

#### vmin

```css
.element {
  width: 10vmin;
}
```
he viewport minimum is the minimum between the height or width as a percentage.

This value will be whichever is currently _smaller_, `vw` or `vh`.

So `20vmin` is 20% of the current width or height, depending which one is smaller.

#### vmax

```css
.element {
  width: 20vmax;
}
```
The viewport maximum is the maximum between the height or width as a percentage.

It’s the opposite of `vmin`, being whichever value is currently _larger_, `vw` or `vh`.

So `20vmax` is the 20% of the current width or height, depending which one is bigger.

## Which units should I use?
You can figure out the most appropriate CSS unit by asking yourself:
- Do I want this element to scale when the viewport size changes?
- If ‘Yes’, what do I want it to scale relative to?

When you’ve answered these questions, knowing the most appropriate unit is much simpler!

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)