CSS Units

CSS properties (like width, height, font-size, margin, etc.) require values with units to tell the browser how to measure them. These units are broadly divided into two categories: **Absolute Units** and **Relative Units**.

1. Absolute Units

Absolute units are fixed and will appear exactly as specified. They are not recommended for screen use because screen sizes vary so much. However, they are perfect for **printing** layouts.

Unit	Description
`px`	Pixels (1px = 1/96th of 1 inch). This is the standard absolute unit for screens.
`pt`	Points (Used primarily in print).
`cm / mm`	Centimeters and Millimeters.

2. Relative Units

Relative units specify a length relative to another length property. They are much better for creating **responsive designs** that work well on all devices.

Unit	Relative to...
`em`	The font-size of the current element (or the parent element).
`rem`	The font-size of the root element (typically the `<html>` tag).
`%`	The parent element's dimensions.
`vw`	1% of the Viewport Width.
`vh`	1% of the Viewport Height.

`em` vs. `rem`

Understanding the difference between em and rem is crucial for flexible layouts.

em: If you nest elements, em values can compound (multiply).
rem: Always predictable because it only looks at the root font size.

html { font-size: 16px; }

/* Always 32px regardless of parents */
h1 { font-size: 2rem; } 

/* 32px ONLY if parent is 16px */
p { font-size: 2em; }

Viewport Units (vw, vh)

Viewport units allow you to size elements based on the exact size of the user's browser window.

This box is 50% of your screen width.

.full-screen-intro {
    width: 100vw;
    height: 100vh;
}

Tip: For most modern projects, use **rem** for font sizes and **%** or **viewport units** for layout containers.

« Previous Lesson Next Lesson »