CSS Units

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 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 UnitNameDescription
cmCentimetersMeasurement in centimeters
mmMillimetersMeasurement in millimeters
inInchesMeasurement in inches (1in = 96px)
pxPixelsMeasurement in screen pixels
ptPointsMeasurement in points (1pt = 1/72 of 1in)
pcPicas Measurement in picas (1 pica = 12 points)

Relative Units

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

Relative UnitDescription
emFont-size in em spaces.
exdefines a measurement relative to a font's x-height.
vw1% of the width of the viewport
vh1% of the height of the viewport
vmin1% of viewport's* smaller dimension
vvmax1% of viewport's* larger dimension

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

Adding CSS
CSS Box Model
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create free tutorials for all.

No Comments

Post A Comment