Understanding CSS Absolute and Relative Units

CSS Web Development Front End Technology

CSS Absolute Units

The absolute length units are fixed in relation to each other. These units are used when the output format is already known. Following are some of the Absolute Length Units −

Sr.No	Unit & Description
1	cm centimeters
2	mm millimeters
3	in inches (1in = 96px = 2.54cm)
4	px * pixels (1px = 1/96th of 1in)
5	pt points (1pt = 1/72 of 1in)
6	pc picas (1pc = 12 pt)

Example

Let us now see an example −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 0.3in;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Output

CSS Relative Units

Relative length units in CSS is used to specify a length relative to another length property.

Relative to the x-height of the current font

Sr.no	Unit & Description
1	em Relative to the font-size of the element i.e 4em means 4 times the size of the current font.
2	ex Relative to the x-height of the current font
3	ch Relative to width of the 0
4	rem Relative to font-size of the root element
5	vw Relative to 1% of the width of the viewport*
6	vh Relative to 1% of the height of the viewport*
7	vmin Relative to 1% of viewport's* smaller dimension
8	vmax Relative to 1% of viewport's* larger dimension
9	% Relative to the parent element

Example

Let us see an example using Relative Length Units −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 1.4em;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>