CSS Units Explained...
Tags: units, measurements, learn, basics
Published: 2020-09-26 11:08:28

## **What are CSS Units?**
CSS units are numeric type values that are used to determine the size of a property such as a margin, width, height, padding, font-size, and so on..

```
margin: 10px;
font-size: 24px;              
padding: 12px;                
width: 300px;
height: 300px;
```
*Here `margin` is the property and `10px` is the value of the property. `px` is the CSS unit called pixel.*

Three types of length used on CSS:
1. Absolute 
2. Relative 
3. Viewport

## **Absolute units**
Absolute units are fixed across everywhere else. Also, it remains absolute if the output device has a higher resolution. I am not relative to anything else, and I sit and always be the same size.  

Here higher resolution output medium is a laser printer on a laser printer 1 cm of the units should be exact, 1cm. But on low-resolution devices such as computer screen results tend to be different. To see it in action, create a box with `width: 3cm` and `height: 3cm` and try to measure it with scale, you can visibly see the difference.

You may have had experience with absolute units in action. For example, while creating a print stylesheet for billing receipt or chance to work in Adobe InDesign, All print measurements are listed in absolute units. Because we create a book using InDesign so units should be absolute in order to print exactly what the output we need.

Absolute units are much more useful in printing books, documents, and defining print stylesheets.

Absolute units are:
### `cm` 
1cm = 96px/2.54
> 37.79527559055118px

### `mm` 
1mm = 1/10th of 1cm

### `Q` 
1Q = 1/40th of 1cm

### `in` 
1in = 2.54cm
> 96px

### `pc` 
1pc = 12pt = 1/6th of 1in

### `pt` 
1pt = 1/72nd of 1in

## **`px`**
1px = 1/96th of 1in

### **Pixel** 🎯
Pixels are recommended and widely used in screens. Pixels don't do anything with screen pixels. It is actually a visual angle unit. For more detailed information about pixel go through this [article] (http://inamidst.com/stuff/notes/csspx)

### **Pixel in CSS**
Pixels are used to fix the size of an element on the screen.

### When to use absolute units?
As we have seen you should avoid absolute units, whenever we aim to create a responsive and flexible website. However absolute units are useful wherever we don't want to stretch the elements. _Eg. Logo_

Yay! That's all about absolute units.

## **Relative units**
Relative units specify a length relative to another length which means, Relative units are relative to something else to the parent elements like the font or the size of the viewport.

The benefit of using relative units is that we can make the font size, padding or other elements scale relative to everything else on the page. Here are the most useful units in web development.

## **em** 🎯
The default font size of the HTML document is 16px. So, 1em is equal to 16px. In CSS one `em` is defined to be the value of font-size for a given font. If the font-size of an element is `14px` then the format of an element, `1em` is equal to `14px`.

> If the user resizes their text or you decide to make font-size larger or smaller in your stylesheet the em length unit will scale proportionately.

In this example, let me show you how padding remains in proportion as I resize the font.

{% codepen https://codepen.io/cheralathan/pen/NWNJwEB default-tab=html,result %}

In the above example, I created two div elements with a class name of `box1` and `box2`. `box1` have width and height set to 3em and has font size set to 16px. `box2` has width and height set to 3em and font-size to 32px.

In the result section, you can see the two boxes were in a different size. But, here both, the div width is the same, but the font size is different. So, width and height scale proportionately. This is how em works relatively to its elements.

Here I'll show you another example of how em is relative to the parent element.

{% codepen https://codepen.io/cheralathan/pen/ZEWPaZd default-tab=html,result %}

In this above example, both `box1` and `box2` classes have different font sizes. box1 class has font-size 16px and box2 has font-size 32px. You can see the difference in the width and height of the `things` div element because each parent's font-size is different. *So `em` is relative to their parent elements.*

## **rem** 🎯
rem units are similar to em. But em uses and relative to current element font-size, **rem uses and relative to the root element font size.** By default root element font size is 16px. So 1rem is equal to 16px.  

{% codepen https://codepen.io/cheralathan/pen/GRZeygQ default-tab=html,result %}

## **% percentage** 🎯
The percent unit is relative to a parent size.

{% codepen https://codepen.io/cheralathan/pen/xxVBpJL default-tab=html,result %}

## **ex**
ex unit is relative to the letter x-height of the current font used in an element.

## **ch**
Represents the width, or more precisely the advance measure of the glyph "0" (zero the Unicode character U+0030) in the current element font.

## **Viewport units**
CSS3 has super-duper units called viewport relative size units. These units are calculated based on the size of the viewport browser window, printable area mobile device display.

We describe viewport units make it possible to specify size relative to the reader window. It could be a phone, desktop, tablet, and so on..

Viewport units are vw, vh, vmin, vmax

## **vw (Viewport width)**
The viewport width is 1/100th of the window's width. For example if your screen resolution is 1920 x 1080, 1vw = 19.2 pixel width. However, the browser calculates the viewport size as the browser window, which includes the scroll bar. The width of the viewport is larger than the width of the HTML element.

> viewport > html > body

Therefore if we set an element 100vw, the element will extend outside the HTML and body element. Because of this nuance, when making an element span the entire width of the page, It is best to use the percentage unit rather than the viewport unit.

## **vh (Viewport height)** 🎯
What do we do if we want to set child div height to the entire height of the screen? We specify parent element height to 100% and the child element height to 100% so we can get the expected output.

Here `vh` come to rescue. We can specify `vh` anywhere in your deeply nested child elements. it is still able to size relative to the viewport dimensions. For example, you can use `vh` to set a full-screen parallax background.

> vh > %

## **vmin**
The unit is 1/100 of viewports width and height, whichever is lesser. For example, if your viewport is 937 pixels wide by 650 pixels tall, 1 vmin is equal to 6.5px

## **vmax**
The unit is 1/100 of viewports width and height, whichever is greater. For example, if your viewport is 937 pixels wide by 650 pixels tall, 1 vmax is equal to 9.37px. This viewport is handy for creating full viewport interfaces.

That's all for CSS units. Have fun, and use appropriate units. 

## References
* https://developer.mozilla.org/en-US/docs/Web/CSS/length
* https://thecssworkshop.com/lessons/relative-units
* https://thecssworkshop.com/lessons/viewport-units
* https://bitsofco.de/viewport-vs-percentage-units/
* https://www.w3.org/Style/Examples/007/units.en.html
* https://www.w3.org/TR/css-values-4/
* https://flaviocopes.com/css-units/
* https://www.freecodecamp.org/news/css-unit-guide/
* https://css-tricks.com/the-lengths-of-css/
* https://hackernoon.com/the-best-css-unit-for-a-responsive-design-ku6q37to
* https://www.oreilly.com/library/view/css-the-definitive/9781449325053/ch04.html
* https://hackernoon.com/understanding-css-grids-fractional-units-fr-the-easy-way-5f43ee008f29
* https://css-tricks.com/introduction-fr-css-unit/