Type of units in CSS

CSS Units

Every property like margin, padding, height, width, font-size, etc in CSS that has some dimensions or length needs a unit. CSS provides us with lots of units, some of whose values are fixed and are called absolute units while there are others whose values are relative to other values like that of the parent element’s or to the default value for that particular HTML element, these are called relative units.

Absolute units

centimeter
millimeter
inches
pixel
point
picas

These units are the ones whose values are fixed irrespective of any other factors like parent element or viewing window i.e the screen size won't affect the size of the element.

CSS - px

px stands for Pixel. Pixels can be defined as 1/96th part of an inch.

Pixels are widely used in websites to make elements of fixed sizes (ex: font-size:14px;) i.e we don't want them to change size with screen size variation.

CSS - pt

pt stands for point. 1 CSS pt is defined as 1/72th of an inch.

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

CSS - pc

pc stands for pica or picas. 1 CSS pt is defined as 1/6th of an inch.

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

CSS - cm

cm stands for centimeter. this also similar to pt and pc

CSS - mm

mm stands for millimeter. this also similar to pt,cm and pc

CSS - in

mm stands for inch. this also similar to pt,pc,cm and mm

Equivalence of Absolute Units

UNIT	EQUAL TO
pixel	1px = 1/96th of an inch
point	1pt = 1/72th of an inch
pica	1pc = 1/6th of an inch
centimeter	2.54 cm = 1 inch
milimeter	10mm = 1cm

Relative units

percentage
em
rem
ch
vh
vw
vmin
ex

These units are relative to some other length property like the parent element's font size or the size of the viewport.

In relative units, we talk in terms of the same property, like, if we are talking about width of an element in relative units then it is relative to the WIDTH of the parent element/viewport.

Relative units, if used correctly, are suitable for making elements scale properly with respect to other things on the same page

CSS - % (percentage)

Percentage is widely used for making responsive sites. This allows us to size HTML elements dynamically relative to the size of the viewing window.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
	*{
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	}
	.main{
	  width: 500px;
	  height: 500px;
	  background-color: blue;
	}
	.box{
	  width: 33.33%;
	  height: 50%;
	  background-color: red;
	  float: left;
	  font-size: 45px;
	  color:white;
	  border: 5px solid black;
	}
  </style>
</head>
<body>
  <div class="main">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</body>
</html>

To download raw file Click Here

CSS - em

1em refers to the default size of the property. So precisely, 1em is equivalent to 100%.

This is mostly used to achieve the same values dynamically as is the case with % but applicable specifically to font size.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<
	<style>
		div{
		  font-size: 20px;
		}
		.absolute{
		  color:red;
		  font-size: 32px;
		}

		.relative{
		  color:blue;
		  font-size: 2em;
		}
	</style>
</head>
<body>
	<div>
		<h1 class="absolute">Tutor Joes</h1>
	</div>
	<div>
		<h1 class="relative">Tutor Joes</h1>
	</div>

</body>
</html>

To download raw file Click Here

CSS - rem

This unit counters the adding-up effect of units like % and em. rem rather stands for Root em.

This is used to achieve the values relative to the root/default value of the HTML elements. This is usually used for font-size property.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
	html{
	  font-size: 30px;
	}
	.absolute{
	  color:red;
	  font-size: 32px;
	}

	.relative{
	  color:blue;
	  font-size: 2rem;
	}
  
  </style>
</head>
<body>
<div>
 <h1 class="absolute">Tutor Joes</h1>
</div>
<div>
 <h1 class="relative">Tutor Joes</h1>
</div>

</body>
</html>

To download raw file Click Here

CSS - vh

This stands for view height. If we want our element to have exactly the same height as your viewport/ view window then use 100vh to denote that.

Mainly used for pages that occupy the entire height of the viewport.

CSS - vw

vw stands for View Width. 100vw means 100% the width of the viewport/view window.

Mainly used when the element width needs to be framed w.r.t the width of the viewport.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
	*{
	  padding: 0;
	  margin: 0;
	}
	body{
	  background-color:orangered;
	  height: 100vh;
	  width: 100vw;
	}
  </style>
</head>
<body>

</body>
</html>