What is CSS unit?

When we talk about the finding the length of any object and distance between two places like your house and your friend’s house, we can talk in kilometers or meters. Whereas talking about the height of a person we, usually, talk in centimeters or feet.

CSS have two unit to expressing the length

1. Absolute Units ( px, cm, in, pt, mm, pc )

Absolute Units is identical units, it means it do change their length at any condition Absolute Unit is not recommended to use in make the site responsive, because of screen size is vary screen to screen

Let's look at where these absolute units are used.

- Pixel ( px )

px is only widely used for website Pixel is understand for 1/96 part of inch.

syntax:

font-size: 50px;

Note In most case we use font-size , but in HTML there is also margin, padding, width, height types length will also follow the same syntax

• cm

cm stand for centimeter . this is rare use in CSS

syntax

font-size: 2cm;

1cm is roughly 37.8 pixels. This unit is mainly used in printer for printing the output on printing page. that is not widely used in to make the website

• in

in stand for inch. ( 1in = 2.54cm )

syntax

font-size: 1in;

This unit is same as the cm but 2.54times to cm mainly used in printer for printing the output on printing page. that is not widely used in to make the website

• pt

pt stand for points .

syntax:

font-size: 2pt;

pt unit is rarely used in HTML . 1pt is defined as 1/72th of an inch.

• mm

mm stand for millimeter.

syntax:

font-size: 100mm;

This unit is mainly used in printers for printing the output on paper and not so widely used for on-screen outputs.

• pc

pc stands for pica .

syntax

font-size: 10pc;

2. Relative Units ( rem, em, %, vh, vw, vmin, vmax )

Relative units are relative to some other length property like the parent element's . when parent element change with view port it will also vary.

lets take a example: If we take element 50% size to body when we change the body to 50% to viewport the element will also reduce to 50%.

• rem

rem stands for "root em". Relative to the font size of the root or element. This relative unit is not affected by the size or setting of a parent element,

syntax:

.container {
font-size: 10rem;
padding: 2rem;
}

• em

When used with the font-size property, em inherits the font-size from its parent element (3em means 3 times the size of the current font)

syntax:

.container h1{
font-size: 1em;
}

• %

% means Percent. Percent is relative on parent element

Syntax:

.container {
height: 70%;
width: 60%;
}

• vh

vh stand for view-height. It is relative 1% height of the viewport.

syntax:

.container {
height: 90vh;
}

• vw

vw stand for view-width. It is relative 1% width of the viewport.

syntax:

.container {
height: 90vw;
}

• vmin and vmax

vmin stand for viewport minimum and relative to 1% of viewport smaller dimension. vmax stand for viewport maximum and relative to 1% of viewport's* larger dimension.

syntax:

.container {
height: 15vmin;
width: 20vmax;
}