Cheralathan

Posted on Sep 26, 2020

CSS Units Explained...

#units #measurements #learn #basics

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:

Absolute
Relative
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

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.

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.

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.

% percentage 🎯

The percent unit is relative to a parent size.

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.

DEV Community