CSS Units Reference 📏
Complete guide to CSS units with real-world examples, browser support information, and practical applications. Master everything from absolute pixels to modern viewport and container units.
Understanding CSS Units
CSS units are the foundation of web layout and typography. They determine how elements are sized, spaced, and positioned across different devices and screen sizes. Choosing the right unit is crucial for creating accessible, responsive, and maintainable web designs.
🎯 Unit Strategy
Different units serve different purposes - absolute units for precision, relative units for scalability, viewport units for responsiveness, and flexible units for modern layouts.
Key Unit Categories:
- Absolute Units: Fixed sizes (px, cm, in)
- Relative Units: Scale with context (%, em, rem)
- Viewport Units: Relative to screen size (vw, vh)
- Typography Units: Based on text metrics (ch, ex)
- Flexible Units: Modern layout units (fr, min-content)
- Container Units: Element-relative sizing (cqw, cqh)
Complete CSS Units Reference
Production-Ready Examples:
- Real-world use cases from modern web applications
- Performance-optimized unit combinations
- Accessibility-focused implementations
- Browser compatibility considerations
- Mobile-first responsive patterns
Interactive Units Reference
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Units Reference - Real World Examples</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.categories {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
justify-content: center;
}
.category-btn {
background: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.category-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.category-btn.active {
background: #3498db;
color: white;
}
.units-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.unit-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.unit-card:hover {
transform: translateY(-5px);
}
.unit-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid #ecf0f1;
}
.unit-icon {
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.absolute { background: #e74c3c; }
.relative { background: #3498db; }
.viewport { background: #2ecc71; }
.typography { background: #9b59b6; }
.flexible { background: #f39c12; }
.container { background: #1abc9c; }
.unit-syntax {
font-family: 'Fira Code', monospace;
background: #2c3e50;
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
font-size: 1.1rem;
margin-bottom: 1rem;
}
.unit-description {
color: #7f8c8d;
margin-bottom: 1rem;
line-height: 1.6;
}
.real-world-usage {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}
.usage-title {
color: #2c3e50;
margin-bottom: 0.5rem;
font-weight: 600;
}
.code-example {
background: #2c3e50;
color: #ecf0f1;
padding: 1rem;
border-radius: 5px;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
margin: 0.5rem 0;
}
.demo-area {
background: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin-top: 1rem;
border: 2px dashed #bdc3c7;
}
.demo-container {
display: grid;
gap: 1rem;
}
.unit-visual {
height: 40px;
background: linear-gradient(90deg, #3498db, #2ecc71);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin: 0.5rem 0;
}
.browser-support {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #ecf0f1;
}
.support-badge {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
}
.supported { background: #d4edda; color: #155724; }
.partial { background: #fff3cd; color: #856404; }
@media (max-width: 768px) {
.units-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.categories {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📏 CSS Units Reference</h1>
<p>Real-world examples of CSS units with practical applications</p>
</div>
<div class="categories">
<button class="category-btn active" onclick="filterUnits('all')">All Units</button>
<button class="category-btn" onclick="filterUnits('absolute')">Absolute Units</button>
<button class="category-btn" onclick="filterUnits('relative')">Relative Units</button>
<button class="category-btn" onclick="filterUnits('viewport')">Viewport Units</button>
<button class="category-btn" onclick="filterUnits('typography')">Typography Units</button>
<button class="category-btn" onclick="filterUnits('flexible')">Flexible Units</button>
</div>
<div class="units-grid">
<!-- Pixel (px) -->
<div class="unit-card" data-category="absolute">
<div class="unit-header">
<div class="unit-icon absolute">📱</div>
<div>
<h3>Pixel (px)</h3>
<p>Absolute unit for precise control</p>
</div>
</div>
<div class="unit-syntax">10px, 16px, 24px</div>
<div class="unit-description">
The most common CSS unit. One pixel represents a single dot on the screen.
Provides consistent sizing across devices but doesn't scale with user preferences.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Border widths and precise lines</li>
<li>Box shadows and subtle effects</li>
<li>Fixed-size icons and images</li>
<li>Print stylesheets for exact measurements</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Fixed navigation bar */</span><br>
.navbar {<br>
height: 60px;<br>
border-bottom: 1px solid #e0e0e0;<br>
box-shadow: 0 2px 4px rgba(0,0,0,0.1);<br>
}<br><br>
<span class="comment">/* Icon buttons */</span><br>
.icon-btn {<br>
width: 40px;<br>
height: 40px;<br>
border-radius: 4px;<br>
border: 2px solid #3498db;<br>
}<br><br>
<span class="comment">/* Print media queries */</span><br>
@media print {<br>
.page {<br>
margin: 0.5in;<br>
font-size: 12px;<br>
}<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="display: flex; gap: 10px; align-items: center;">
<div style="width: 40px; height: 40px; background: #3498db; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">
40px
</div>
<div style="width: 60px; height: 60px; background: #e74c3c; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">
60px
</div>
<div style="width: 80px; height: 80px; background: #2ecc71; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">
80px
</div>
</div>
<div style="border: 1px solid #bdc3c7; padding: 16px; margin-top: 10px; border-radius: 4px;">
<div style="font-size: 14px; color: #7f8c8d;">Container with 16px padding and 1px border</div>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- REM -->
<div class="unit-card" data-category="relative typography">
<div class="unit-header">
<div class="unit-icon typography">𝖠</div>
<div>
<h3>REM</h3>
<p>Relative to root font size</p>
</div>
</div>
<div class="unit-syntax">1rem, 1.5rem, 2rem</div>
<div class="unit-description">
Relative to the font-size of the root element (html).
Perfect for creating scalable, accessible designs that respect user preferences.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Typography scaling and vertical rhythm</li>
<li>Accessible spacing systems</li>
<li>Component-based design systems</li>
<li>Responsive layouts that scale with text</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Base font size setup */</span><br>
html {<br>
font-size: 16px; <span class="comment">/* 1rem = 16px */</span><br>
}<br><br>
<span class="comment">/* Typography scale */</span><br>
h1 { font-size: 2.5rem; } <span class="comment">/* 40px */</span><br>
h2 { font-size: 2rem; } <span class="comment">/* 32px */</span><br>
h3 { font-size: 1.5rem; } <span class="comment">/* 24px */</span><br>
p { font-size: 1rem; } <span class="comment">/* 16px */</span><br><br>
<span class="comment">/* Consistent spacing */</span><br>
.card {<br>
padding: 1.5rem;<br>
margin-bottom: 1rem;<br>
border-radius: 0.5rem;<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="font-size: 2.5rem; font-weight: bold; color: #2c3e50;">Heading 2.5rem</div>
<div style="font-size: 1.5rem; font-weight: bold; color: #3498db; margin: 0.5rem 0;">Subheading 1.5rem</div>
<div style="font-size: 1rem; color: #7f8c8d; margin-bottom: 1rem;">Body text 1rem with consistent spacing.</div>
<div style="background: #34495e; color: white; padding: 1.5rem; border-radius: 0.5rem;">
<div style="font-size: 1.25rem; margin-bottom: 0.5rem;">Card Title</div>
<div style="font-size: 1rem; opacity: 0.8;">Card content with rem-based padding and margins</div>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- EM -->
<div class="unit-card" data-category="relative typography">
<div class="unit-header">
<div class="unit-icon typography">𝗘</div>
<div>
<h3>EM</h3>
<p>Relative to parent font size</p>
</div>
</div>
<div class="unit-syntax">1em, 1.5em, 2em</div>
<div class="unit-description">
Relative to the font-size of the parent element. Excellent for creating
scalable components and maintaining proportional relationships within components.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Component-scoped sizing</li>
<li>Button and form element scaling</li>
<li>Nested component styling</li>
<li>Icon sizing relative to text</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Button component with em scaling */</span><br>
.btn {<br>
font-size: 1rem;<br>
padding: 0.75em 1.5em;<br>
border-radius: 0.5em;<br>
border: 0.125em solid transparent;<br>
}<br><br>
<span class="comment">/* Different button sizes */</span><br>
.btn-small { font-size: 0.875rem; }<br>
.btn-large { font-size: 1.25rem; }<br><br>
<span class="comment">/* Icon within button */</span><br>
.btn .icon {<br>
width: 1em;<br>
height: 1em;<br>
margin-right: 0.5em;<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
<button style="font-size: 0.875rem; padding: 0.75em 1.5em; background: #3498db; color: white; border: none; border-radius: 0.5em;">
Small Button
</button>
<button style="font-size: 1rem; padding: 0.75em 1.5em; background: #2ecc71; color: white; border: none; border-radius: 0.5em;">
Regular Button
</button>
<button style="font-size: 1.25rem; padding: 0.75em 1.5em; background: #e74c3c; color: white; border: none; border-radius: 0.5em;">
Large Button
</button>
</div>
<div style="margin-top: 1rem; padding: 1em; background: #f8f9fa; border-radius: 0.5em; border-left: 0.25em solid #3498db;">
<div style="font-size: 1.25em; font-weight: bold; margin-bottom: 0.5em;">Notice</div>
<div style="font-size: 1em;">This alert uses em units for proportional spacing</div>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- Percentage (%) -->
<div class="unit-card" data-category="relative">
<div class="unit-header">
<div class="unit-icon relative">%</div>
<div>
<h3>Percentage (%)</h3>
<p>Relative to parent element</p>
</div>
</div>
<div class="unit-syntax">50%, 100%, 25%</div>
<div class="unit-description">
Relative to the same property of the parent element. Essential for
creating fluid layouts, grids, and responsive designs.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Fluid grid layouts and containers</li>
<li>Responsive images and media</li>
<li>Flexible spacing systems</li>
<li>Animation transforms and scaling</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Fluid grid system */</span><br>
.container {<br>
width: 90%;<br>
max-width: 1200px;<br>
margin: 0 auto;<br>
}<br><br>
<span class="comment">/* Responsive columns */</span><br>
.col-4 { width: 25%; }<br>
.col-6 { width: 50%; }<br>
.col-8 { width: 75%; }<br><br>
<span class="comment">/* Full-height hero section */</span><br>
.hero {<br>
height: 100vh;<br>
background: linear-gradient(135deg, #667eea, #764ba2);<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="background: #34495e; padding: 1rem; border-radius: 0.5rem;">
<div style="color: white; text-align: center; margin-bottom: 1rem;">90% Width Container</div>
<div style="display: flex; gap: 2%; margin-bottom: 1rem;">
<div style="width: 23%; background: #3498db; color: white; padding: 1rem; border-radius: 0.25rem; text-align: center;">
23%
</div>
<div style="width: 50%; background: #2ecc71; color: white; padding: 1rem; border-radius: 0.25rem; text-align: center;">
50%
</div>
<div style="width: 23%; background: #e74c3c; color: white; padding: 1rem; border-radius: 0.25rem; text-align: center;">
23%
</div>
</div>
<div style="background: #f39c12; color: white; padding: 2%; border-radius: 0.25rem; text-align: center;">
Flexible 2% Padding
</div>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- Viewport Width (vw) -->
<div class="unit-card" data-category="viewport">
<div class="unit-header">
<div class="unit-icon viewport">📐</div>
<div>
<h3>Viewport Width (vw)</h3>
<p>Relative to viewport width</p>
</div>
</div>
<div class="unit-syntax">50vw, 100vw, 25vw</div>
<div class="unit-description">
1vw = 1% of the viewport width. Perfect for creating truly responsive
elements that scale with the browser window size.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Full-width hero sections and banners</li>
<li>Responsive typography that scales with viewport</li>
<li>Fluid spacing and layout elements</li>
<li>Background elements that fill the screen</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Full-width hero section */</span><br>
.hero {<br>
width: 100vw;<br>
height: 100vh;<br>
margin-left: calc(-50vw + 50%);<br>
background: linear-gradient(135deg, #667eea, #764ba2);<br>
}<br><br>
<span class="comment">/* Fluid typography */</span><br>
.responsive-heading {<br>
font-size: clamp(2rem, 5vw, 4rem);<br>
margin-bottom: 5vw;<br>
}<br><br>
<span class="comment">/* Responsive spacing */</span><br>
.section {<br>
padding: 10vw 5vw;<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 5vw; border-radius: 0.5rem; text-align: center; margin-bottom: 2vw;">
<div style="font-size: clamp(1.5rem, 4vw, 3rem); font-weight: bold; margin-bottom: 2vw;">
Responsive Heading
</div>
<div style="font-size: clamp(1rem, 2vw, 1.5rem); opacity: 0.9;">
This section uses vw units for padding and typography
</div>
</div>
<div style="display: flex; gap: 2vw; justify-content: center;">
<div style="width: 20vw; height: 10vw; background: #3498db; color: white; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem; font-size: clamp(0.75rem, 1.5vw, 1rem);">
20vw × 10vw
</div>
<div style="width: 30vw; height: 10vw; background: #2ecc71; color: white; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem; font-size: clamp(0.75rem, 1.5vw, 1rem);">
30vw × 10vw
</div>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">20+</span>
<span class="support-badge supported">19+</span>
<span class="support-badge supported">9+</span>
</div>
</div>
<!-- Viewport Height (vh) -->
<div class="unit-card" data-category="viewport">
<div class="unit-header">
<div class="unit-icon viewport">📊</div>
<div>
<h3>Viewport Height (vh)</h3>
<p>Relative to viewport height</p>
</div>
</div>
<div class="unit-syntax">50vh, 100vh, 25vh</div>
<div class="unit-description">
1vh = 1% of the viewport height. Essential for creating full-screen
layouts and elements that scale with the browser height.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Full-screen hero sections and landing pages</li>
<li>Sticky headers and footers</li>
<li>Vertical centering and alignment</li>
<li>Mobile-friendly interface elements</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Full-screen landing page */</span><br>
.landing-page {<br>
height: 100vh;<br>
display: flex;<br>
flex-direction: column;<br>
justify-content: center;<br>
align-items: center;<br>
}<br><br>
<span class="comment">/* Sticky navigation */</span><br>
.sticky-nav {<br>
position: sticky;<br>
top: 0;<br>
height: 10vh;<br>
min-height: 60px;<br>
background: white;<br>
box-shadow: 0 2px 10px rgba(0,0,0,0.1);<br>
}<br><br>
<span class="comment">/* Mobile-first modal */</span><br>
.modal {<br>
max-height: 90vh;<br>
overflow-y: auto;<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; height: 200px; background: #34495e; padding: 1rem; border-radius: 0.5rem;">
<div style="background: #3498db; color: white; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem;">
50% Height
</div>
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
<div style="background: #2ecc71; color: white; flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem; font-size: 0.875rem;">
33% Height
</div>
<div style="background: #e74c3c; color: white; flex: 2; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem; font-size: 0.875rem;">
66% Height
</div>
</div>
</div>
<div style="margin-top: 1rem; text-align: center; color: #7f8c8d; font-size: 0.875rem;">
Try resizing the window to see vh units in action
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">20+</span>
<span class="support-badge supported">19+</span>
<span class="support-badge supported">9+</span>
</div>
</div>
<!-- CH Unit -->
<div class="unit-card" data-category="typography">
<div class="unit-header">
<div class="unit-icon typography">📝</div>
<div>
<h3>Character Unit (ch)</h3>
<p>Relative to character width</p>
</div>
</div>
<div class="unit-syntax">50ch, 75ch, 100ch</div>
<div class="unit-description">
Based on the width of the "0" (zero) character in the current font.
Perfect for creating optimal reading experiences and text containers.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Optimal line length for readability (45-75 characters)</li>
<li>Code editors and terminal-like interfaces</li>
<li>Form inputs with character limits</li>
<li>Typography-focused layouts</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Optimal reading width */</span><br>
.article {<br>
max-width: 65ch;<br>
margin: 0 auto;<br>
line-height: 1.6;<br>
}<br><br>
<span class="comment">/* Code block styling */</span><br>
.code-block {<br>
font-family: 'Fira Code', monospace;<br>
max-width: 80ch;<br>
overflow-x: auto;<br>
}<br><br>
<span class="comment">/* Form inputs with character limits */</span><br>
.username-input {<br>
width: 20ch;<br>
font-family: monospace;<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="max-width: 65ch; margin: 0 auto; line-height: 1.6; background: white; padding: 2rem; border-radius: 0.5rem; border-left: 4px solid #3498db;">
<h4 style="margin-bottom: 1rem; color: #2c3e50;">Optimal Reading Experience</h4>
<p style="margin-bottom: 1rem; color: #7f8c8d;">
This paragraph is set to 65 characters maximum width, which is considered
the optimal line length for comfortable reading. The text flows naturally
and is easy to follow without straining your eyes.
</p>
<p style="color: #7f8c8d;">
Notice how the lines break at consistent character counts, creating
a pleasant reading rhythm throughout the text content.
</p>
</div>
<div style="margin-top: 1rem; display: flex; gap: 1rem; justify-content: center;">
<div style="width: 20ch; background: #34495e; color: white; padding: 0.5rem; border-radius: 0.25rem; font-family: monospace; text-align: center;">
20ch width
</div>
<div style="width: 30ch; background: #2c3e50; color: white; padding: 0.5rem; border-radius: 0.25rem; font-family: monospace; text-align: center;">
30ch width
</div>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">27+</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">9+</span>
</div>
</div>
</div>
</div>
<script>
function filterUnits(category) {
const cards = document.querySelectorAll('.unit-card');
const buttons = document.querySelectorAll('.category-btn');
buttons.forEach(btn => {
btn.classList.remove('active');
if (btn.textContent.toLowerCase().includes(category)) {
btn.classList.add('active');
}
});
cards.forEach(card => {
if (category === 'all' || card.dataset.category.includes(category)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
}
</script>
</body>
</html>Advanced CSS Units
Modern Layout Units
Advanced units for container queries, grid systems, and sophisticated responsive designs that work at the component level.
cqw, cqh, cqi, cqb
fr, min-content, max-content
svw, lvw, dvw, svh
dpi, dppx, xdpi
Special Purpose Units
Units for specific use cases like angles, time, resolution, and aspect ratios that enable advanced visual effects and animations.
deg, rad, grad, turn
s, ms (seconds, milliseconds)
dpi, dpcm, dppx
aspect-ratio: 16/9
Advanced Units Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced CSS Units - Modern Web Development</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.advanced-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 2rem;
}
.advanced-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.unit-group {
margin-bottom: 2rem;
}
.unit-group h3 {
color: #2c3e50;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #3498db;
}
.unit-item {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
border-left: 4px solid #3498db;
}
.unit-syntax {
font-family: 'Fira Code', monospace;
background: #2c3e50;
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.unit-description {
color: #7f8c8d;
margin-bottom: 0.5rem;
}
.demo-container {
background: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin: 1rem 0;
}
.container-query-demo {
container-type: inline-size;
width: 100%;
border: 2px dashed #3498db;
padding: 1rem;
margin: 1rem 0;
}
.gradient-demo {
height: 100px;
margin: 1rem 0;
border-radius: 8px;
}
.aspect-ratio-demo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.ratio-box {
background: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
@media (max-width: 768px) {
.advanced-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🚀 Advanced CSS Units</h1>
<p>Modern CSS units for sophisticated web development</p>
</div>
<div class="advanced-grid">
<!-- Container Query Units -->
<div class="advanced-card">
<h2>📦 Container Query Units</h2>
<div class="unit-group">
<h3>Element-Relative Sizing</h3>
<div class="unit-item">
<div class="unit-syntax">cqw, cqh, cqi, cqb, cqmin, cqmax</div>
<div class="unit-description">
Units relative to the dimensions of the container element.
Essential for creating truly component-based responsive designs.
</div>
</div>
</div>
<div class="demo-container">
<h4>Container Query Units Demo:</h4>
<div class="container-query-demo">
<style>
@container (min-width: 400px) {
.responsive-card {
font-size: 1.25rem;
padding: 2rem;
}
}
@container (max-width: 399px) {
.responsive-card {
font-size: 1rem;
padding: 1rem;
}
}
</style>
<div class="responsive-card" style="background: #3498db; color: white; border-radius: 8px; text-align: center;">
<h3>Responsive Card</h3>
<p>This card responds to its container size</p>
</div>
</div>
<p style="margin-top: 1rem; color: #7f8c8d; font-size: 0.875rem;">
Try resizing the container to see the component adapt
</p>
</div>
</div>
<!-- CSS Grid Units -->
<div class="advanced-card">
<h2>🔲 CSS Grid Units</h2>
<div class="unit-group">
<h3>Grid-Specific Sizing</h3>
<div class="unit-item">
<div class="unit-syntax">fr unit: 1fr, 2fr, 0.5fr</div>
<div class="unit-description">
Fractional units that distribute available space in grid layouts.
Perfect for creating flexible, proportional grid systems.
</div>
</div>
<div class="unit-item">
<div class="unit-syntax">min-content, max-content, fit-content</div>
<div class="unit-description">
Intrinsic sizing keywords that respect content dimensions
while providing flexible constraints.
</div>
</div>
</div>
<div class="demo-container">
<h4>Grid Units Demo:</h4>
<div style="
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 1rem;
margin: 1rem 0;
">
<div style="background: #3498db; color: white; padding: 1rem; border-radius: 4px; text-align: center;">
1fr
</div>
<div style="background: #2ecc71; color: white; padding: 1rem; border-radius: 4px; text-align: center;">
2fr
</div>
<div style="background: #e74c3c; color: white; padding: 1rem; border-radius: 4px; text-align: center;">
1fr
</div>
</div>
<div style="
display: grid;
grid-template-columns: min-content max-content;
gap: 1rem;
margin: 1rem 0;
">
<div style="background: #34495e; color: white; padding: 0.5rem; border-radius: 4px; white-space: nowrap;">
min-content
</div>
<div style="background: #9b59b6; color: white; padding: 0.5rem; border-radius: 4px;">
max-content width
</div>
</div>
</div>
</div>
<!-- Angle Units -->
<div class="advanced-card">
<h2>📐 Angle Units</h2>
<div class="unit-group">
<h3>Rotation and Gradient Control</h3>
<div class="unit-item">
<div class="unit-syntax">deg, rad, grad, turn</div>
<div class="unit-description">
Units for defining angles in transforms, gradients, and
other CSS properties requiring rotational values.
</div>
</div>
</div>
<div class="demo-container">
<h4>Angle Units Demo:</h4>
<div class="gradient-demo" style="background: linear-gradient(45deg, #3498db, #2ecc71);"></div>
<div class="gradient-demo" style="background: conic-gradient(from 0.25turn, #3498db, #2ecc71, #e74c3c);"></div>
<div style="display: flex; gap: 1rem; margin-top: 1rem;">
<div style="
width: 80px;
height: 80px;
background: #3498db;
transform: rotate(45deg);
display: flex;
align-items: center;
justify-content: center;
color: white;
border-radius: 4px;
">
45deg
</div>
<div style="
width: 80px;
height: 80px;
background: #e74c3c;
transform: rotate(0.125turn);
display: flex;
align-items: center;
justify-content: center;
color: white;
border-radius: 4px;
">
0.125turn
</div>
</div>
</div>
</div>
<!-- Time Units -->
<div class="advanced-card">
<h2>⏱️ Time Units</h2>
<div class="unit-group">
<h3>Animation and Transition Timing</h3>
<div class="unit-item">
<div class="unit-syntax">s, ms</div>
<div class="unit-description">
Units for defining durations and delays in animations,
transitions, and other time-based CSS properties.
</div>
</div>
</div>
<div class="demo-container">
<h4>Time Units Demo:</h4>
<style>
@keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}
.animated-box {
width: 60px;
height: 60px;
background: #3498db;
border-radius: 4px;
animation: slide 3s ease-in-out infinite;
}
</style>
<div class="animated-box"></div>
<div style="display: flex; gap: 1rem; margin-top: 1rem;">
<button style="
padding: 0.5rem 1rem;
background: #2ecc71;
color: white;
border: none;
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
" onmouseover="this.style.background='#27ae60'" onmouseout="this.style.background='#2ecc71'">
Hover (300ms)
</button>
<button style="
padding: 0.5rem 1rem;
background: #e74c3c;
color: white;
border: none;
border-radius: 4px;
transition: all 1s ease;
cursor: pointer;
" onmouseover="this.style.background='#c0392b'" onmouseout="this.style.background='#e74c3c'">
Slow (1s)
</button>
</div>
</div>
</div>
<!-- Resolution Units -->
<div class="advanced-card">
<h2>🖥️ Resolution Units</h2>
<div class="unit-group">
<h3>Media Query and Image Optimization</h3>
<div class="unit-item">
<div class="unit-syntax">dpi, dpcm, dppx</div>
<div class="unit-description">
Units for defining screen resolution in media queries,
helping optimize content for different display densities.
</div>
</div>
</div>
<div class="demo-container">
<h4>Resolution Units Demo:</h4>
<div style="background: #34495e; color: white; padding: 1rem; border-radius: 4px; margin: 1rem 0;">
<p>Current device pixel ratio: <strong id="pixel-ratio">Calculating...</strong></p>
<p style="margin-top: 0.5rem; font-size: 0.875rem; opacity: 0.8;">
High-resolution displays (2x, 3x) benefit from higher resolution images
</p>
</div>
<style>
@media (min-resolution: 2dppx) {
.high-dpi { display: block; }
.low-dpi { display: none; }
}
@media (max-resolution: 1.9dppx) {
.high-dpi { display: none; }
.low-dpi { display: block; }
}
</style>
<div class="high-dpi" style="background: #2ecc71; color: white; padding: 1rem; border-radius: 4px;">
🚀 High DPI Display Detected
</div>
<div class="low-dpi" style="background: #f39c12; color: white; padding: 1rem; border-radius: 4px;">
📱 Standard Display Detected
</div>
</div>
<script>
document.getElementById('pixel-ratio').textContent = window.devicePixelRatio + 'x';
</script>
</div>
<!-- Aspect Ratio -->
<div class="advanced-card">
<h2>🎬 Aspect Ratio Units</h2>
<div class="unit-group">
<h3>Modern Ratio Control</h3>
<div class="unit-item">
<div class="unit-syntax">aspect-ratio: 16 / 9</div>
<div class="unit-description">
Maintain specific width-to-height ratios for media elements,
ensuring consistent proportions across different screen sizes.
</div>
</div>
</div>
<div class="demo-container">
<h4>Aspect Ratio Demo:</h4>
<div class="aspect-ratio-demo">
<div class="ratio-box" style="aspect-ratio: 16/9;">
16:9 Video
</div>
<div class="ratio-box" style="aspect-ratio: 4/3;">
4:3 Photo
</div>
<div class="ratio-box" style="aspect-ratio: 1;">
1:1 Square
</div>
<div class="ratio-box" style="aspect-ratio: 2/3;">
2:3 Portrait
</div>
</div>
<div style="margin-top: 1rem; background: #34495e; color: white; padding: 1rem; border-radius: 4px;">
<div style="aspect-ratio: 21/9; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; border-radius: 4px;">
Ultra Wide (21:9)
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>CSS Units Cheatsheet
Quick Reference Guide
Essential CSS units organized by category for quick lookup and reference during development. Each unit includes practical use cases and implementation guidance.
/* Typography & Spacing */
font-size: 1rem; padding: 1.5rem;
/* Responsive Layouts */
width: 100vw; height: 100vh;
/* Modern Grids */
grid-template-columns: 1fr 2fr 1fr;
Complete Units Cheatsheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Units Cheatsheet - Quick Reference</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.cheatsheet-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.cheatsheet-section {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.section-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid;
}
.section-icon {
font-size: 2rem;
}
.absolute { border-color: #e74c3c; }
.relative { border-color: #3498db; }
.viewport { border-color: #2ecc71; }
.typography { border-color: #9b59b6; }
.flexible { border-color: #f39c12; }
.special { border-color: #1abc9c; }
.unit-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.unit-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
transition: background 0.2s ease;
}
.unit-row:hover {
background: #e9ecef;
}
.unit-name {
font-family: 'Fira Code', monospace;
font-weight: 600;
color: #2c3e50;
}
.unit-purpose {
font-size: 0.85rem;
color: #7f8c8d;
text-align: right;
}
.quick-examples {
background: #2c3e50;
color: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin-top: 2rem;
}
.example-title {
color: #3498db;
margin-bottom: 1rem;
font-weight: 600;
}
.code-block {
background: #34495e;
padding: 1rem;
border-radius: 5px;
margin: 1rem 0;
overflow-x: auto;
}
.best-practices {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 1.5rem;
border-radius: 8px;
margin-top: 2rem;
}
.browser-support {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.browser-item {
text-align: center;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
}
.browser-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
.cheatsheet-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.unit-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.unit-purpose {
text-align: left;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📋 CSS Units Cheatsheet</h1>
<p>Quick reference guide for essential CSS units</p>
</div>
<div class="cheatsheet-grid">
<!-- Absolute Units -->
<div class="cheatsheet-section absolute">
<div class="section-header">
<div class="section-icon">📏</div>
<h2>Absolute Units</h2>
</div>
<div class="unit-list">
<div class="unit-row">
<span class="unit-name">px</span>
<span class="unit-purpose">Pixels</span>
</div>
<div class="unit-row">
<span class="unit-name">cm</span>
<span class="unit-purpose">Centimeters</span>
</div>
<div class="unit-row">
<span class="unit-name">mm</span>
<span class="unit-purpose">Millimeters</span>
</div>
<div class="unit-row">
<span class="unit-name">in</span>
<span class="unit-purpose">Inches</span>
</div>
<div class="unit-row">
<span class="unit-name">pt</span>
<span class="unit-purpose">Points (1/72in)</span>
</div>
<div class="unit-row">
<span class="unit-name">pc</span>
<span class="unit-purpose">Picas (12pt)</span>
</div>
</div>
</div>
<!-- Relative Units -->
<div class="cheatsheet-section relative">
<div class="section-header">
<div class="section-icon">📐</div>
<h2>Relative Units</h2>
</div>
<div class="unit-list">
<div class="unit-row">
<span class="unit-name">%</span>
<span class="unit-purpose">Percentage</span>
</div>
<div class="unit-row">
<span class="unit-name">em</span>
<span class="unit-purpose">Parent font size</span>
</div>
<div class="unit-row">
<span class="unit-name">rem</span>
<span class="unit-purpose">Root font size</span>
</div>
<div class="unit-row">
<span class="unit-name">ex</span>
<span class="unit-purpose">X-height</span>
</div>
<div class="unit-row">
<span class="unit-name">ch</span>
<span class="unit-purpose">Character width</span>
</div>
<div class="unit-row">
<span class="unit-name">lh</span>
<span class="unit-purpose">Line height</span>
</div>
</div>
</div>
<!-- Viewport Units -->
<div class="cheatsheet-section viewport">
<div class="section-header">
<div class="section-icon">🖥️</div>
<h2>Viewport Units</h2>
</div>
<div class="unit-list">
<div class="unit-row">
<span class="unit-name">vw</span>
<span class="unit-purpose">Viewport width</span>
</div>
<div class="unit-row">
<span class="unit-name">vh</span>
<span class="unit-purpose">Viewport height</span>
</div>
<div class="unit-row">
<span class="unit-name">vmin</span>
<span class="unit-purpose">Viewport minimum</span>
</div>
<div class="unit-row">
<span class="unit-name">vmax</span>
<span class="unit-purpose">Viewport maximum</span>
</div>
<div class="unit-row">
<span class="unit-name">svw, svh</span>
<span class="unit-purpose">Small viewport</span>
</div>
<div class="unit-row">
<span class="unit-name">lvw, lvh</span>
<span class="unit-purpose">Large viewport</span>
</div>
</div>
</div>
<!-- Flexible Units -->
<div class="cheatsheet-section flexible">
<div class="section-header">
<div class="section-icon">🎯</div>
<h2>Flexible Units</h2>
</div>
<div class="unit-list">
<div class="unit-row">
<span class="unit-name">fr</span>
<span class="unit-purpose">Grid fraction</span>
</div>
<div class="unit-row">
<span class="unit-name">min-content</span>
<span class="unit-purpose">Minimum content size</span>
</div>
<div class="unit-row">
<span class="unit-name">max-content</span>
<span class="unit-purpose">Maximum content size</span>
</div>
<div class="unit-row">
<span class="unit-name">fit-content</span>
<span class="unit-purpose">Fit content size</span>
</div>
<div class="unit-row">
<span class="unit-name">auto</span>
<span class="unit-purpose">Automatic sizing</span>
</div>
</div>
</div>
<!-- Special Units -->
<div class="cheatsheet-section special">
<div class="section-header">
<div class="section-icon">⚡</div>
<h2>Special Units</h2>
</div>
<div class="unit-list">
<div class="unit-row">
<span class="unit-name">deg</span>
<span class="unit-purpose">Degrees</span>
</div>
<div class="unit-row">
<span class="unit-name">rad</span>
<span class="unit-purpose">Radians</span>
</div>
<div class="unit-row">
<span class="unit-name">turn</span>
<span class="unit-purpose">Turns</span>
</div>
<div class="unit-row">
<span class="unit-name">s, ms</span>
<span class="unit-purpose">Time units</span>
</div>
<div class="unit-row">
<span class="unit-name">dpi, dppx</span>
<span class="unit-purpose">Resolution</span>
</div>
</div>
</div>
<!-- Container Units -->
<div class="cheatsheet-section typography">
<div class="section-header">
<div class="section-icon">📦</div>
<h2>Container Units</h2>
</div>
<div class="unit-list">
<div class="unit-row">
<span class="unit-name">cqw</span>
<span class="unit-purpose">Container width</span>
</div>
<div class="unit-row">
<span class="unit-name">cqh</span>
<span class="unit-purpose">Container height</span>
</div>
<div class="unit-row">
<span class="unit-name">cqi</span>
<span class="unit-purpose">Container inline</span>
</div>
<div class="unit-row">
<span class="unit-name">cqb</span>
<span class="unit-purpose">Container block</span>
</div>
<div class="unit-row">
<span class="unit-name">cqmin, cqmax</span>
<span class="unit-purpose">Container min/max</span>
</div>
</div>
</div>
</div>
<!-- Quick Examples Section -->
<div class="quick-examples">
<div class="example-title">🚀 Real-World Unit Patterns</div>
<div class="code-block">
<span class="comment">/* Modern responsive design */</span><br>
.container {<br>
width: min(100% - 2rem, 1200px);<br>
margin: 0 auto;<br>
}<br><br>
<span class="comment">/* Fluid typography system */</span><br>
html { font-size: 16px; }<br>
h1 { font-size: clamp(2rem, 5vw, 4rem); }<br>
p { font-size: 1rem; line-height: 1.6; }<br><br>
<span class="comment">/* Component-based spacing */</span><br>
.card {<br>
padding: 1.5rem;<br>
margin-bottom: 1rem;<br>
border-radius: 0.5rem;<br>
}<br><br>
<span class="comment">/* Full-screen hero */</span><br>
.hero {<br>
height: 100vh;<br>
width: 100vw;<br>
background: linear-gradient(135deg, #667eea, #764ba2);<br>
}
</div>
</div>
<!-- Best Practices -->
<div class="best-practices">
<h3>💡 CSS Units Best Practices</h3>
<ul>
<li><strong>Use rem for typography and spacing</strong> - Ensures accessibility and consistent scaling</li>
<li><strong>Use em for component-scoped sizing</strong> - Perfect for buttons, form elements, and nested components</li>
<li><strong>Combine vw with clamp() for fluid typography</strong> - Creates responsive text that scales smoothly</li>
<li><strong>Use % for fluid layouts and containers</strong> - Essential for responsive grid systems</li>
<li><strong>Use ch for optimal reading width</strong> - 45-75 characters per line for best readability</li>
<li><strong>Use fr units for CSS Grid layouts</strong> - Creates flexible, proportional grid systems</li>
<li><strong>Provide px fallbacks for modern units</strong> - Ensures compatibility with older browsers</li>
<li><strong>Test with user font size preferences</strong> - Ensures accessibility compliance</li>
</ul>
</div>
<!-- Browser Support -->
<div class="browser-support">
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Chrome</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Firefox</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Safari</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Edge</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
</div>
</div>
</body>
</html>Practical Applications & Patterns
🎯 Production Use Cases
- Responsive design systems with fluid typography
- Component-based architectures with em scaling
- Full-screen layouts with viewport units
- Accessible interfaces that respect user preferences
- Modern grid systems with fractional units
- Print-optimized styles with absolute units
🔧 Development Workflow
- Set root font size for rem baseline
- Use rem for typography and global spacing
- Use em for component-scoped sizing
- Implement viewport units for full-screen elements
- Use fr units for CSS Grid layouts
- Test across devices and user preferences
💡 Pro Tips for Unit Mastery
Performance & Accessibility:
- Use relative units for accessible scaling
- Combine vw with clamp() for fluid typography
- Test with browser zoom and font size preferences
- Use ch units for optimal reading experiences
Best Practices:
- Be consistent with unit usage across projects
- Use CSS variables with relative units
- Provide fallbacks for modern units
- Document your unit system for team consistency
Master CSS Units Today! 🚀
Start exploring CSS units with real-world examples and practical demos. Build your CSS skills with comprehensive reference materials and production-ready patterns.