CSS Units

CSS Units

CSS units are used to define the length and size of several properties.

Several CSS properties take "length" values, such as font-size, width, margin, padding, border, etc.

CSS has two types of units:

• Absolute units
• Relative units

CSS Absolute Units

Absolute units are fixed, and the length expressed in any of these will appear exactly that size.

Absolute units do NOT change when the screen size change, and are not recommended for websites. However, they can be used if the output medium is known, such as for print layout.

The most used absolute unit is px (pixels).

CSS Relative Units

Relative units specify a length relative to another length property (like parent element, root element, or viewport).

Relative length units scale better between different screen sizes, making them ideal for responsive web design.

The two most used relative units are em and rem.

Tip: The em and rem units are perfect for creating scalable and responsive websites!