CSS — Lesson 10
CSS Units
Understanding different units for sizing and spacing.
CSS Units
CSS has many units for specifying sizes. Choosing the right unit affects responsiveness.
Absolute Units
/* px: pixels (most common) */
.box { width: 300px; font-size: 16px; }
Relative Units
/* em: relative to parent font size */
.parent { font-size: 16px; }
.child { font-size: 1.5em; } /* = 24px */
/* rem: relative to root (html) font size */
html { font-size: 16px; }
.text { font-size: 2rem; } /* = 32px */
/* %: relative to parent */
.sidebar { width: 25%; }
/* vw/vh: viewport width/height */
.hero { height: 100vh; }
When to Use Each Unit
- px: Borders, shadows, small precise values
- rem: Font sizes, spacing (most predictable)
- em: Component-level scaling
- %: Responsive widths
- vw/vh: Full-screen sections
Tip: Use
rem for font sizes and px for borders. This makes your design scalable and accessible.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →