Loading...

CSS Units

You already know how to write a declaration like color: teal. Size properties need a second idea: how large. font-size: 16 alone is invalid for most length properties — the browser needs a unit so it knows what “16” means.

What are CSS units?

CSS units are the measurement endings attached to length values — for example px, rem, %, vw, and vh. Absolute units stay the same size regardless of the parent. Relative units scale with something else: the element’s font, the root font, a parent’s size, or the viewport.

Absolute vs relative at a glance

Use this table as a map. You do not need every unit on day one — learn the families, then practice the everyday ones.

📊 Common CSS length units

Unit Family Typical use
px Absolute (screen pixels) Borders, fine icon tweaks, 1px lines
rem Relative to root font size Page text and consistent spacing
em Relative to element’s own font size Padding that grows with local text
% Relative to parent size Fluid widths inside a container
vw Relative to viewport width Full-bleed sections (use carefully)
vh Relative to viewport height Hero height, full-screen panels

Pixels (px)

px is an absolute unit on the screen. It is predictable for thin borders and small fixed details. It is less ideal as the only unit for all typography on a responsive site, because it does not automatically scale with the user’s root font preference the way rem can.

Pixel sizes for a card border

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 8px;
width: 320px;
}

When px still shines

Prefer px for hairline borders, shadow offsets, and tiny UI chrome where you want a fixed visual edge. Prefer relative units when the design should breathe with font size or container width.

rem and em

rem is relative to the root element’s font size (usually <html>). em is relative to the current element’s font size (or the parent’s, depending on the property). For beginners, rem is the safer default for font-size and many spacing values because it stays consistent across nested elements.

Root-relative type with rem

css
CSS Code 
html {
font-size: 100%; /* often 16px in browsers */
}

.lead {
font-size: 1.25rem; /* ~20px if root is 16px */
margin-bottom: 0.75rem;
}

em in one sentence

Use em when you want a value to scale with the local font — for example padding that should grow if that component’s text gets larger. If nested em values keep multiplying and feel “runaway,” switch those sizes to rem.

Percentages (%)

A percentage is relative to a parent measurement. For width: 50%, the element aims for half of the parent’s width (when the parent has a defined width). Percentages are the classic tool for fluid layouts inside a container.

Fluid width with percent

css
CSS Code 
.sidebar {
width: 30%;
}

.main {
width: 70%;
}

Viewport units (vw and vh)

1vw is 1% of the viewport width; 1vh is 1% of the viewport height. These are powerful for full-screen heroes, but easy to overuse — text sized only in vw can become unreadable on very wide or very narrow screens.

Viewport height for a hero

css
CSS Code 
.hero {
min-height: 80vh;
padding: 2rem;
}

Choosing a default habit

A practical starter habit: use rem for font sizes and most vertical spacing, % or flexible layout tools (later: Flexbox/Grid) for widths, and px for borders and tiny fixed details. Revisit viewport units when you build full-bleed sections — not for every margin.

Try it yourself

  1. Create a .card rule with width: 80%, max-width: 24rem, and border: 1px solid #94a3b8.
  2. Set .card h2 { font-size: 1.5rem; } and a short paragraph at 1rem.
  3. Add a .banner { min-height: 40vh; } section above the card.
  4. Resize the browser window and change the root html { font-size: … } to feel how %, vh, and rem respond differently.
  5. Optional: convert the heading to 1.5em inside .card and note whether nested sizing surprises you.

Common mistakes

  • Writing font-size: 16 without a unit — invalid for length in standard CSS
  • Using only px for every font on a site that should respect user zoom/preferences
  • Nesting many em font sizes until text becomes huge or tiny
  • Setting body text with vw alone so lines explode on large monitors
  • Assuming % height works when the parent has no explicit height

Summary

  • Length values usually need a unit (px, rem, %, vw, …)
  • Absolute units stay fixed; relative units scale with font, parent, or viewport
  • Prefer rem for type, %/layout systems for widths, px for fine borders
  • em scales with local font; vw/vh scale with the viewport
  • Match the unit to the job — do not force one unit everywhere

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial