Understanding CSS Absolute and Relative Units

CSSWeb DevelopmentFront 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.NoUnit & Description
1cm
centimeters
2mm
millimeters
3in
inches (1in = 96px = 2.54cm)
4px *
pixels (1px = 1/96th of 1in)
5pt
points (1pt = 1/72 of 1in)
6pc
 

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.noUnit & Description
1em
Relative to the font-size of the element i.e 4em means 4 times the size of the current font.
2ex
Relative to the x-height of the current font
3ch
Relative to width of the 0
4rem
Relative to font-size of the root element
5vw
Relative to 1% of the width of the viewport*
6vh
Relative to 1% of the height of the viewport*
7vmin
Relative to 1% of viewport's* smaller dimension
8vmax
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>

Output

raja
Published on 30-Dec-2019 15:46:08
Advertisements