CSS Values Overview
Every CSS declaration is a property–value pair. The value side is richer than it looks at first glance — CSS supports lengths, percentages, keywords, colors, images, functions, and more. Understanding the value types available helps you know what's valid where, why some values work in some contexts and not others, and how to combine them powerfully with functions like calc(), min(), and clamp().
Value categories
Category | Examples | Where used |
|---|---|---|
Keywords |
| Nearly every property |
Absolute lengths |
| Sizing, spacing, typography |
Relative lengths |
| Responsive sizing, typography |
Viewport units |
| Viewport-relative sizing |
Colors |
| Color properties |
Functions |
| Dynamic values, custom props |
Images |
| Backgrounds, |
Strings |
|
|
Integers |
|
|
Numbers |
|
|
Angles |
| Gradients, |
Times |
|
|
Frequencies |
| Rarely used (speech CSS) |
Resolutions |
|
|
Keyword values
CSS properties accept a variety of keyword values — some are universal (inherit, initial, unset, revert), and some are specific to a property:
/* Global keywords — work on any property */ color: inherit; display: initial; margin: unset; font-size: revert; /* Property-specific keywords */ display: flex; display: grid; display: block; display: inline; display: none; font-weight: bold; /* equivalent to 700 */ font-weight: normal; /* equivalent to 400 */ font-weight: bolder; /* relative — one step heavier than parent */ position: relative; position: absolute; position: fixed; position: sticky; position: static; cursor: pointer; cursor: default; cursor: not-allowed; cursor: grab;
The difference between a number and a length
A bare number has no unit. A length is a number plus a unit. Some properties accept numbers (no unit), some accept lengths (number + unit), and some accept both — and the meaning differs:
/* Number (no unit) */
opacity: 0.8; /* 0 to 1 — no unit */
line-height: 1.6; /* unitless — multiplied by the font-size */
z-index: 10;
flex-grow: 1;
/* Length (number + unit) */
margin: 16px;
font-size: 1.2rem;
border-width: 2px;
/* line-height: 1.6 vs line-height: 1.6em — the difference matters */
.parent {
font-size: 18px;
line-height: 1.6; /* children inherit 1.6 — each calculates its own 1.6 × font-size */
}
.parent-em {
font-size: 18px;
line-height: 1.6em; /* children inherit the computed value: 28.8px — not the multiplier */
}
/* In nested elements, unitless is almost always what you want for line-height */CSS functions as values
CSS functions take arguments and return a computed value. They're used wherever a value is expected:
/* Arithmetic */ width: calc(100% - 64px); padding: calc(var(--spacing) * 2); /* Clamped responsive values */ font-size: clamp(1rem, 2.5vw, 1.5rem); width: min(100%, 600px); margin-top: max(16px, 3vh); /* Custom properties */ color: var(--color-primary); gap: var(--spacing-base, 1rem); /* with fallback */ /* Color functions */ color: rgb(0, 102, 204); color: hsl(210, 100%, 40%); color: oklch(0.55 0.2 264); background: rgba(0, 0, 0, 0.5); /* Gradient functions */ background: linear-gradient(to right, #0066cc, #00ccff); background: radial-gradient(circle at center, white, #f0f0f0); /* Transformation functions */ transform: translateX(50%) rotate(45deg) scale(1.2); transform: matrix(1, 0, 0, 1, 0, 0); /* Shape functions */ clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); clip-path: circle(50% at 50% 50%);
Zero doesn't need a unit
When a length value is zero, the unit is optional and conventionally omitted:
/* Both are valid — 0 is recommended */ margin: 0; /* ✓ conventional */ margin: 0px; /* valid but redundant */ border: 0; /* removes border — same as border: none in practice */ padding: 0; /* In calc() — 0 still needs a unit if it's being computed */ calc(0px + 10px) /* valid */ calc(0 + 10px) /* also valid — 0 is unitless and treated as 0px */