CSS Values and Units
📌 Covered in this chapter:
px · % · em · rem · vw · vh · vmin · vmax · ch · ex · fr · deg · s · ms · Unitless · Choosing Units
Welcome to Chapter 10: CSS Values and Units — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1CSS Values Overview
CSS properties ki values numbers, keywords, functions, or unit-suffixed measurements. Correct unit choose cheyadam responsive, accessible design ki critical.
| Unit | Type | Use Case |
|---|---|---|
px | Absolute | Borders, shadows, fixed icons |
% | Relative | Parent-based width/height |
em | Relative | Component-scoped scaling (parent font-size) |
rem | Relative | Root-based spacing & typography (recommended) |
vw / vh | Viewport | Full-screen sections, hero banners |
vmin / vmax | Viewport | Responsive squares, min/max dimension |
ch | Character | Readable line length (~65ch) |
fr | Grid fraction | CSS Grid flexible columns |
deg, s, ms | Animation | Rotations, transition duration |
2Absolute vs Relative Units
html { font-size: 16px; }
.container {
width: 90%;
max-width: 1200px;
padding: 2rem; /* 32px — scales with root font */
font-size: 1.125rem; /* 18px */
}
.hero {
min-height: 100vh;
padding: 5vw 4vw;
}
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}3Unitless Values & Choosing Correct Units
Some properties accept unitless values — line-height: 1.5, opacity: 0.8, z-index: 10, flex: 1.
💡 Unit Selection Guide
- Typography & spacing:
rem - Component-internal scaling:
em - Layout widths:
%,fr,max-width - Full viewport sections:
vh,vw - Hairline borders:
px