CSS Values & Units

CSS Values & Units

CSS values determine how properties are applied to elements. Values can be keywords, numbers, percentages, dimensions, functions, colors, URLs, and other CSS data types.

Many numeric CSS values use units that describe lengths, angles, time, frequency, resolution, or other quantities. Some units are absolute, while others are relative to fonts, the viewport, a query container, or another reference value.

CSS Values

A CSS declaration assigns a value to a property. The value determines how that property affects the selected element.

p {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #333;
}

In this example, 1.25rem, 1.6, and #333 are CSS values. Different properties accept different types of values.

For definitions of value types such as <length>, <percentage>, and <color>, see the CSS Data Type List.

CSS-wide Keywords

CSS-wide keywords can be used with CSS properties to control inheritance, initial values, and the effects of the cascade.

Numbers & Percentages

CSS uses numbers in many forms. An <integer> is a whole number, while a <number> can contain a fractional component. Percentages use the % symbol and are calculated relative to a value defined by the property.

.example {
  opacity: 0.8;
  z-index: 10;
  width: 75%;
}

Numbers do not always require a unit. Whether a unit is allowed or required depends on the property and the type of value it accepts.

Length Units

CSS length values represent distances. A length consists of a number followed immediately by a length unit, such as 20px, 2rem, or 50vw.

Length units are generally divided into absolute and relative units. Absolute units have fixed relationships to one another, while relative units are calculated from another measurement such as a font size, viewport dimension, or query container. A zero length can usually be written without a unit, such as margin: 0;.

Absolute Length Units

Absolute length units have fixed relationships to one another. CSS defines 1in as 96px, with the other absolute units defined relative to those measurements.

A CSS pixel is a reference unit and does not necessarily correspond to one physical device pixel.

Font-relative Length Units

Font-relative units calculate lengths from font metrics. They are useful for typography and layouts that should scale with text.

Viewport Units

Viewport units are relative to dimensions of the viewport. CSS provides default viewport units along with small, large, and dynamic viewport variants that account for changes in browser interface areas. Default viewport units generally behave like the large viewport variants.

For example, 1vw represents 1% of the viewport width, while 1vh represents 1% of the viewport height. On mobile devices, dvh can be useful when the visible viewport changes as browser controls appear or disappear.

Container Query Units

Container query length units are relative to the dimensions of an eligible query container rather than the viewport. They are useful when a component should scale according to the space available in its container. If no eligible container exists for an axis, the unit uses the small viewport size for that axis.

Angle Units

Angle units represent rotations and other angular values.

Time Units

Time values are commonly used for animations and transitions.

Frequency Units

Frequency values represent the number of occurrences per unit of time.

Resolution Units

Resolution units describe pixel density and are useful in contexts such as resolution media queries and image selection.

Flex Unit

The fr unit represents a fraction of the leftover space available to flexible tracks in a CSS Grid container. Unlike the general units defined by CSS Values and Units, fr is defined by CSS Grid Layout.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

In this example, the flexible tracks share the available space in a 1:2:1 ratio. Track content and minimum sizing requirements can affect the final widths.

CSS Unit Summary