Absolute units like px, cm, mm, or in are not affected by parent or viewport sizes. They are static. px is the most common absolute unit for digital screens.

System Check

Does a pixel (px) value change when you resize the window?

Yes, alwaysNo, it is fixedOnly on mobileDepends on the font size

Community Palettes

Share Your Variables

Built a cool HSL theming system or a fluid typography calculator? Share your snippet.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Values and Units

Pascual Vila

Frontend Instructor.

Every property in CSS takes a value. Understanding the different types of values—lengths, percentages, colors, and functions—is crucial for building flexible, responsive interfaces.

Absolute vs. Relative Lengths

Absolute units (like px, cm) are fixed. A pixel is a pixel, regardless of other settings. Relative units (like em, rem, %) scale relative to something else—font size or parent width.

The Power of REM

rem stands for "Root EM". It is relative to the font-size of the root element (<html>). This makes it the gold standard for accessible sizing and global scaling.

Functional Notation

CSS offers functions to calculate values dynamically. calc() lets you perform math (e.g., `100% - 20px`). var() allows you to use Custom Properties (variables) to store and reuse values like colors or spacing tokens.

CSS Values Glossary

Pixel (px): A fixed unit of length. One pixel generally corresponds to one point on a screen.
EM vs REM: EM is relative to the parent element's font size. REM is relative to the root (html) font size.
Viewport Units (vw, vh): Percentage of the browser window's width (vw) or height (vh). 100vh = full screen height.
HSL: Hue, Saturation, Lightness. A color model that makes it easy to adjust tone and brightness intuitively.

📖 INDEX

Values & Units Tree

Concept 1: Absolute Units