Lengths and Units

CSS Lengths and Units fall into three broad categories:

CSS Lengths and Units

Relative units

CSS relative units are measured in relation to other things such as parent elements. There are three types of relative units such as em , ex and px .


It is a unit of measurement equal to the current font size. The height of the em unit can be different in different parts of the document. When users can change the size of text in their browser, the em unit can vary in relation to the size of the text that the user has selected.

p { font-size: 0.8em; }


CSS relative units


px is the most commonly used unit of length in CSS. It considered relative because it varies with display resolution, particularly between low resolution screens and high resolution print output.

p { font-size: 10px; }

Absolute units

Absolute units are used far less than relative units. They have predefined meanings or real world equivalents.

Absolute units in CSS

CSS Absolute units


CSS percentages (%) are another way to specify relative size that give a value in relation to another value. It is an integer value, or a decimal number value, followed by a percentage character.

CSS percentages

The font-size: 100% will display your text at browsers default fontsize settings.

If you want make your font size smaller then you should decrese the % value.

CSS font-size