CSS Units

CSS units define how we specify sizes on websites, such as font size, width, or height. They fall into two main categories: absolute and relative units.

Absolute and Relative Units

Absolute units are fixed values that provide the same size on all devices (for example px or cm). Relative units, on the other hand, adapt to the environment, such as the current font size or the size of the browser window.

Using CSS Units in Practice

Let us look at some examples of how absolute and relative units work in practice.

In this example, one paragraph has an absolute (px) font size, while the other uses a relative (em) font size.

In this example, a box has a width of 50% of its parent element and a height of 50% of the viewport height.

Viewport Based Units

Viewport units adapt to the size of the browser window. 100vw represents the full width, while 100vh represents the full height. This is especially useful for creating full-screen sections.

Comparison of em and rem

The em unit relates to the font size of the current parent element, while rem always relates to the root (html) element. Therefore, 2em and 2rem can produce different sizes.

Combining Units

In practice, relative units are often combined: for example, a box can be 80% wide and 60vh high, with an inner element inside it that is 50% wide and 50% high.

Tips for Using CSS Units

The correct use of units is crucial when creating responsive and user-friendly websites.

• For responsive design, prefer relative units (em, rem, %, vh, vw).
• Avoid using too many fixed px values, as they can become hard to read on smaller screens.
• For printing, use absolute units (cm, mm, in) instead, as they are more precise.