Loading...
CSS Units Complete Reference
CSS uses a variety of units to define measurements, dimensions, and colors, giving developers precise control over layouts, typography, and styling. This complete CSS Units Reference Guide provides an exhaustive listing of absolute, relative, viewport, container query, percentage, angle, time, frequency, resolution, color, function, and grid units. Developers can quickly reference unit syntax, conversions, examples, and real-world use cases to create responsive, accessible, and visually consistent designs. By organizing units into logical categories, this guide allows fast lookup for both beginner and advanced CSS users, ensuring practical application across screens, print media, and modern UI components.
📊 Absolute Length Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| px | Pixels - device pixels | 1px = 1/96 inch | width: 300px | Screen layouts, borders, shadows | All browsers |
| cm | Centimeters | 1cm = 37.8px | margin: 2cm | Print stylesheets, physical measurements | All browsers |
| mm | Millimeters | 1mm = 3.78px | border: 1mm solid | Print media, precise measurements | All browsers |
| in | Inches | 1in = 96px | page-break-after: 2in | Print layouts, large measurements | All browsers |
| pt | Points | 1pt = 1.33px | font-size: 12pt | Typography, print media | All browsers |
| pc | Picas | 1pc = 16px | line-height: 1.5pc | Print typography, column widths | All browsers |
| Q | Quarter-millimeters | 1Q = 0.25mm | margin: 4Q | Print layouts, very precise measurements | Modern browsers |
📊 Relative Length Units
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| em | Em units | Font size of parent element | font-size: 1.2em | Typography, spacing relative to text | All browsers |
| rem | Root em | Font size of root element | margin: 2rem | Consistent spacing, scalable layouts | IE9+ |
| ex | X-height | Height of lowercase 'x' in current font | line-height: 2ex | Typography, vertical alignment | All browsers |
| ch | Character width | Width of '0' character in current font | width: 40ch | Text containers, monospace layouts | IE9+ |
| cap | Cap height | Height of capital letters in current font | margin-top: 1cap | Typography, vertical spacing | Modern browsers |
| ic | Ideographic character | Width of CJK ideographic character | width: 20ic | East Asian typography | Modern browsers |
| lh | Line height | Line height of element | margin: 1lh | Vertical rhythm, spacing | Modern browsers |
| rlh | Root line height | Line height of root element | padding: 0.5rlh | Consistent vertical spacing | Modern browsers |
📊 Viewport Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| vw | Viewport width | 1% of viewport width | width: 50vw | Full-width layouts, responsive design | IE9+ |
| vh | Viewport height | 1% of viewport height | height: 100vh | Full-height sections, hero areas | IE9+ |
| vmin | Viewport minimum | 1% of smaller viewport dimension | font-size: 4vmin | Square elements, responsive typography | IE9+ |
| vmax | Viewport maximum | 1% of larger viewport dimension | width: 50vmax | Responsive layouts, adaptive design | IE9+ |
| vi | Viewport inline | 1% of viewport in inline direction | padding: 2vi | Logical properties, international layouts | Modern browsers |
| vb | Viewport block | 1% of viewport in block direction | margin: 3vb | Logical properties, writing modes | Modern browsers |
| dvw | Dynamic viewport width | 1% of dynamic viewport width | width: 100dvw | Mobile layouts, address bar handling | Modern browsers |
| dvh | Dynamic viewport height | 1% of dynamic viewport height | height: 100dvh | Mobile full-height, dynamic UI | Modern browsers |
| lvw | Large viewport width | 1% of large viewport width | max-width: 90lvw | Mobile layouts, UI shown state | Modern browsers |
| lvh | Large viewport height | 1% of large viewport height | min-height: 100lvh | Mobile layouts, maximum viewport | Modern browsers |
| svw | Small viewport width | 1% of small viewport width | width: 100svw | Mobile layouts, UI hidden state | Modern browsers |
| svh | Small viewport height | 1% of small viewport height | height: 100svh | Mobile layouts, minimum viewport | Modern browsers |
📊 Container Query Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| cqw | Container query width | 1% of container width | width: 50cqw | Container-based responsive design | Modern browsers |
| cqh | Container query height | 1% of container height | height: 80cqh | Container-based layouts | Modern browsers |
| cqi | Container query inline | 1% of container inline size | padding: 2cqi | Logical container layouts | Modern browsers |
| cqb | Container query block | 1% of container block size | margin: 1cqb | Block-direction container sizing | Modern browsers |
| cqmin | Container query minimum | 1% of smaller container dimension | font-size: 3cqmin | Container-based typography | Modern browsers |
| cqmax | Container query maximum | 1% of larger container dimension | border-radius: 2cqmax | Container-based styling | Modern browsers |
📊 Percentage Units
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| % | Percentage | Parent element's corresponding property | width: 50% | Flexible layouts, responsive design | All browsers |
📊 Angle Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| deg | Degrees | 360deg = full circle | transform: rotate(45deg) | Rotations, gradients | All browsers |
| grad | Gradians | 400grad = full circle | transform: rotate(100grad) | Mathematical calculations, gradients | All browsers |
| rad | Radians | 2π rad = full circle | transform: rotate(1.57rad) | Mathematical transformations | All browsers |
| turn | Turns | 1turn = full circle | transform: rotate(0.25turn) | Intuitive rotations, animations | IE9+ |
📊 Time Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| s | Seconds | 1s = 1000ms | transition-duration: 2s | Animations, transitions | All browsers |
| ms | Milliseconds | 1000ms = 1s | animation-delay: 500ms | Precise timing, fast animations | All browsers |
📊 Frequency Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| Hz | Hertz | 1Hz = 1 cycle per second | Not commonly used in CSS | Audio-related properties (future) | Limited |
| kHz | Kilohertz | 1kHz = 1000Hz | Not commonly used in CSS | Audio-related properties (future) | Limited |
📊 Resolution Units
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| dpi | Dots per inch | Physical dots per inch | @media (min-resolution: 300dpi) | High-DPI displays, print media | IE9+ |
| dpcm | Dots per centimeter | Physical dots per centimeter | @media (min-resolution: 118dpcm) | Metric measurements, print | IE9+ |
| dppx | Dots per px unit | Device pixels per CSS pixel | @media (min-resolution: 2dppx) | Retina displays, device pixel ratio | IE9+ |
| x | Alias for dppx | Same as dppx | @media (min-resolution: 2x) | Retina displays, simplified syntax | Modern browsers |
📊 Color Units
| Unit | Description | Format | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| \# | Hexadecimal | #RRGGBB or #RGB | color: #ff0000 | Standard color notation | All browsers |
| rgb() | RGB function | rgb(r, g, b) | color: rgb(255, 0, 0) | Precise color control | All browsers |
| rgba() | RGB with alpha | rgba(r, g, b, a) | background: rgba(255, 0, 0, 0.5) | Transparent colors | IE9+ |
| hsl() | HSL function | hsl(h, s%, l%) | color: hsl(0, 100%, 50%) | Intuitive color selection | IE9+ |
| hsla() | HSL with alpha | hsla(h, s%, l%, a) | background: hsla(0, 100%, 50%, 0.5) | Transparent HSL colors | IE9+ |
| hwb() | HWB function | hwb(h w% b%) | color: hwb(0 0% 0%) | Alternative color model | Modern browsers |
| lab() | Lab function | lab(l a b) | color: lab(50% 20 -30) | Perceptual color space | Modern browsers |
| lch() | LCH function | lch(l c h) | color: lch(50% 40 180) | Cylindrical Lab color space | Modern browsers |
| oklab() | OKLab function | oklab(l a b) | color: oklab(0.5 0.2 -0.3) | Improved Lab color space | Modern browsers |
| oklch() | OKLCH function | oklch(l c h) | color: oklch(0.5 0.4 180) | Improved LCH color space | Modern browsers |
| color() | Color function | color(space r g b) | color: color(display-p3 1 0 0) | Wide-gamut color spaces | Modern browsers |
📊 Function Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| calc() | Mathematical calculation | Combines different units | width: calc(100% - 20px) | Mixed unit calculations | IE9+ |
| min() | Minimum value | Returns smallest value | width: min(100px, 50%) | Responsive constraints | Modern browsers |
| max() | Maximum value | Returns largest value | width: max(200px, 50%) | Responsive minimums | Modern browsers |
| clamp() | Clamped value | clamp(min, preferred, max) | font-size: clamp(1rem, 4vw, 2rem) | Responsive with limits | Modern browsers |
| attr() | Attribute value | Uses HTML attribute value | width: attr(data-width px) | Dynamic values from HTML | Limited support |
| var() | CSS variable | Uses custom property value | color: var(--main-color) | CSS custom properties | IE11+ (partial), Modern browsers |
📊 Grid Units
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| fr | Fraction unit | Fraction of available space | grid-template-columns: 1fr 2fr | CSS Grid layouts, flexible columns | IE10+ (with -ms-) |
Quick Examples
css
CSS Code
/* Mixing absolute and relative units */
.container {
width: calc(100vw - 2rem);
max-width: 1200px;
padding: 1em 5%;
}
/* Responsive typography with clamp */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 1em;
}
/* Viewport units for full-screen layouts */
.hero {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
/* Container query units for component styling */
.card {
width: 100cqw;
padding: 2cqi;
font-size: clamp(0.875rem, 3cqw, 1.25rem);
}
/* CSS Grid with fractional units */
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 2fr;
gap: 1rem;
}Use relative units (rem, em, %) for scalable and accessible designs. Prefer rem over em for consistent spacing throughout the design. Use viewport units (vw, vh) carefully, as they do not account for scrollbars. Consider using clamp() for responsive typography that adapts smoothly. Mix units strategically with calc() for complex responsive layouts. Use px for borders, box-shadows, and other decorative elements. Test container query units in supported browsers before production use. Use fr units in CSS Grid for flexible and intuitive layouts. Be aware of browser support when using newer units like dvh, lvh, svh. Consider using logical units (vi, vb) for international layouts. Use HSL/HSB color units for easier color manipulation and theming. Always provide fallbacks for newer units in older browsers. Test different unit combinations across various devices and screen sizes.
🧠 Test Your Knowledge
Ready to Start
Reference Knowledge Check
Test your knowledge of CSS units and their usage.
3
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