CSS Values and Units

Last Updated: April 1, 2022

You have to have good knowledge of different types of values and units used in CSS properties. Every property in CSS has a value.

For some properties, you can specify the values in different ways

h1 {
  color: black;
  background-color: rgb(197,93,161);
}

Numbers

Data Type Description
integer A whole number such as 234, 0, -4
number Decimal number such as 3.45, 0.78, 599, -9, -7.45
dimention Number with unit such as 100px, 5s, 45deg
percentage Percentage values such as 34%, relative to another quantity

Lengths

There are two types of lengths called relative and absolute

Absolute lengths

Absolute length is not relative to anything so it is the same size as defined.

Unit Name Equivalent to
cm Centimeters 1cm = 37.8px = 25.2/64in
mm Millimeters 1cm = 37.8px = 25.2/64in
Q Quarter-millimeters 1Q = 1/40th of 1cm
i Inches 1in = 2.54cm = 96px
pc Picas 1pc = 1/6th of 1in
pt Points 1pt = 1/72th of 1in
px Pixels 1px = 1/96th of 1in

These units are very important when you do the printing.

Relative length units

em Unit

em is coming from the typography world. The following example shows font-size : 1.5em for child element relative to the parent.

So child element should have font-size of 27px (1.5 * 18px = 27px).

Remember: when em units are used on font-size, the size is relative to the font-size of the parent. When used on other properties, it’s relative to the font-size of the element itself.

.parent {
  font-size: 18px;
}
.child {
  font-size: 1.5em;
}
Unit Relative to
em em is coming from the typography world. If parent element has font-size: 18px; and child element has font-size: 18px . So child element should have font-size of 27px (1.5 * 18px = 27px).
ex x-height of the element’s font.
ch The advance measure (width) of the glyph “0” of the element’s font.
lh Line height of the element.
vw 1% of the viewport’s width.
vh 1% of the viewport’s height.
vmin 1% of the viewport’s smaller dimension.
vmax 1% of the viewport’s larger dimension.

The viewport is the visible area of a webpage.

Examples

Length in px

Box with width=150px and height=150px

Length in vw and vh

Box with width=15vw and height=15vh

font-size in em

Box with width=15vw and height=15vh
Test