10 Jul CSS Units

Before moving further, it’s good to first work with the units used in CSS. Since, we will be using properties such as width, margin, padding, etc, so we should know what length units are available in CSS. Let’s start with CSS units.

For example, set the font size for the heading, with the unit px,

We used the CSS units in Begin with CSS lesson also. Other examples are listed below,

Here, using the units ex and px,

Using the unit in,

Generally, there are two types of length units in CSS,

Absolute Units

Here are the absolute units we’ll use in CSS,

Absolute Unit	Name	Description
cm	Centimeters	Measurement in centimeters
mm	Millimeters	Measurement in millimeters
in	Inches	Measurement in inches (1in = 96px)
px	Pixels	Measurement in screen pixels
pt	Points	Measurement in points (1pt = 1/72 of 1in)
pc	Picas	Measurement in picas (1 pica = 12 points)

Relative Units

Here are the relative units we’ll use in CSS,

Relative Unit	Description
em	Font-size in em spaces.
ex	defines a measurement relative to a font's x-height.
vw	1% of the width of the viewport
vh	1% of the height of the viewport
vmin	1% of viewport's* smaller dimension
vvmax	1% of viewport's* larger dimension

In this lesson, we learned about Absolute and Relative Units in CSS such as ex, px, pt, etc.