Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Fixed size (px, pt)
Based on context (em, rem, %)
Screen-based (vw, vh)
1px = 1 dot on the screen. Fixed size that doesn't change with browser settings.
width: 200px;
border: 2px solid black;✅ Best for: Borders, small fixed elements, precise layouts
1pt = 1/72 of an inch. Primarily for print, not screens.
font-size: 12pt;📄 Best for: Print stylesheets, PDFs
Relative to root font-size (usually 16px). Does NOT compound through nesting.
font-size: 1.5rem; /* 24px if root is 16px */
padding: 2rem; /* 32px */✅ Best for: Typography, spacing, consistent sizing
Relative to parent font-size. Compounds through nested elements.
font-size: 1.5em; /* 1.5 × parent size */
margin: 2em; /* 2 × current element size */✅ Best for: Component-based spacing, media queries
Relative to parent element's corresponding property.
width: 50%; /* Half of parent width */
font-size: 150%; /* 1.5 × parent font */✅ Best for: Fluid layouts, responsive widths
1vw = 1% of viewport width
width: 50vw; /* Half screen */1vh = 1% of viewport height
height: 100vh; /* Full screen */1% of smaller viewport dimension
font-size: 5vmin;1% of larger viewport dimension
width: 80vmax;✅ Best for: Full-screen sections, hero banners, responsive typography
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>📏 CSS Units Demo</h1>
<div class="box">
<div class="label">ABSOLUTE: Pixels (px)</div>
<div class="px-box">
width: 200px
<br><code>Always 200 pixels wide</code>
</div>
</div>
<div class="box">
<div class="label">RELATIVE: REM</div>
<div class="rem-box">
width: 12.5rem
<br><code>200px (12.5 × 16px root)</code>
</div>
</div>
<div class="box">
<div class="label">RELATIVE: Percentage (%)</div>
<div class="percent-box">
width: 50%
<br><code>Half of parent container</code>
</div>
</div>
<div class="box">
<div class="label">VIEWPORT: vw (Viewport Width)</div>
<div class="vw-box">
width: 30vw
<br><code>30% of browser width - try resizing!</code>
</div>
</div>
</div>
</body>
</html>Loading preview...
pxFixed pixels
Use: Borders, small elements
remRoot-relative
Use: Spacing, typography ⭐
emParent-relative
Use: Component scaling
%Parent percentage
Use: Fluid widths
vwViewport width
Use: Full-width sections
vhViewport height
Use: Full-height sections