Types
The value types every property, function and at-rule draws on. A type is written <name> in a property's syntax and defines a family of allowed values.
Numeric
| Type | Meaning |
|---|---|
<number> | A number, with or without a fraction: 1, 0.5, -2. |
<integer> | A whole number, e.g. a z-index or grid line. |
<percentage> | A number followed by %, resolved against some reference. |
<ratio> | Two numbers as width / height, e.g. 16 / 9. |
Distance — <length>
A number plus a unit. 0 may be written without one. A <length-percentage> accepts either a length or a percentage.
| Group | Units |
|---|---|
| Absolute | px, cm, mm, in, pt, pc, Q |
| Font-relative | em, rem, ex, ch, cap, ic, lh, rlh |
| Viewport | vw, vh, vmin, vmax, vi, vb (and s/l/d variants: svh, lvh, dvh) |
| Container | cqw, cqh, cqi, cqb, cqmin, cqmax |
Angle, time, frequency & resolution
| Type | Units |
|---|---|
<angle> | deg, grad, rad, turn |
<time> | s, ms |
<frequency> | Hz, kHz |
<resolution> | dpi, dpcm, dppx (x) |
Color — <color>
A named colour ( rebeccapurple ), transparent , currentColor , a hex value ( #rgb , #rrggbb , #rrggbbaa ), or a colour function — rgb() , hsl() , hwb() , lab() , lch() , oklab() , oklch() and color() . See colour functions.
Images — <image>
A url() , a <gradient> ( linear-gradient() …), or image-set() for resolution switching. Used by background-image , list-style-image and more.
Position & shapes
A <position> is one or two keywords/lengths — center , left top , 50% 100% — used by background-position , object-position and gradients. A <basic-shape> is inset() , circle() , ellipse() , polygon() or path() , used by clip-path and shape-outside .
Grid
<flex> is the fr unit — a fraction of the leftover space in a grid. Track sizes also accept min-content , max-content , auto and minmax() .
Text
| Type | Meaning |
|---|---|
<custom-ident> | An author-chosen name, e.g. an @keyframes or grid-line name. |
<dashed-ident> | An identifier that must start with --, as in custom properties. |
<string> | Text in quotes, as used by content and quotes. |
Global keywords
Every property also accepts the CSS-wide keywords, which reset rather than set a value.
| Keyword | Effect |
|---|---|
inherit | Take the computed value from the parent. |
initial | Reset to the property's specification default. |
unset | Inherit if the property is inherited, otherwise initial. |
revert | Roll back to the value from the previous cascade origin (e.g. the browser's). |
revert-layer | Roll back to the value from the previous cascade layer. |