CSS Units

In this tutorial you will learn about the CSS Units and its application with practical example.

Every property in the CSS has a specific value for the selector, the value for that property depends on the type of property. For many CSS Properties type of value needs to be defined in length unit, so the value comprising of a numeric/number value with a unit, The numeric value can be either an integer or a real number.The units can be either relative or absolute, if the physical properties of the output medium are known then absolute unit is better option.

Table Of Contents

Relative Units in CSS

Unit Description
em the current font size
ex height of letter x of the current font
px pixels

Absolute Units in CSS

Unit Description
mm millimeters
cm centimeters
in inches
pt points – 1 pt = 1/72 in
pc picas – 1 pc = 12 pt

Example :

CSS Declaration Output
p {font-size:9px;}

Font Size 9px.

p {font-size:3em;}

Font Size 3em.

p {font-size:3ex;}

Font Size 3ex.

p {font-size:0.2in;}

Font Size 0.2 inch.

p {font-size:0.5cm;}

Font Size 0.5 cm.

p {font-size:12mm;}

Font Size 12 mm.

p {font-size:24pt;}

Font Size 24 pt.

p {font-size:2pc;}

Font Size 2 pc.

Percentage unit in CSS

Length values can also be defined in percentage too , percentage value can be defined as an integer, or a decimal number with a percentage character (%).

Example:

A percentage value can be defined relative to or in reference to something .

In this tutorial we have learn about the CSS Units and its application with practical example. I hope you will like this tutorial.