CSS values and units

{{CSSRef}} 

Every CSS declaration consists of a property/value pair. The value can take various forms depending on the property, such as a single integer, keyword, function, or a combination of different items; some values have units, while others do not. Every property also accepts the CSS-wide values. The CSS values and units module defines the data types — values and units — that CSS properties accept. This module also defines the CSS value definition syntax, or formal grammar, used to define the set of valid values for every CSS property and function.

Reference

Properties

• {{cssxref("interpolate-size")}} 

Functions

• {{cssxref("abs()")}} 
• {{cssxref("acos()")}} 
• {{cssxref("asin()")}} 
• {{cssxref("atan()")}} 
• {{cssxref("atan2()")}} 
• {{cssxref("attr()")}} 
• {{cssxref("calc()")}} 
• {{cssxref("calc-size()")}} 
• {{cssxref("clamp()")}} 
• {{cssxref("cos()")}} 
• {{cssxref("exp()")}} 
• {{cssxref("hypot()")}} 
• {{cssxref("ident()")}} 
• {{cssxref("inherit()")}} 
• {{cssxref("log()")}} 
• {{cssxref("max()")}} 
• {{cssxref("min()")}} 
• {{cssxref("mod()")}} 
• {{cssxref("pow()")}} 
• {{cssxref("rem()")}} 
• {{cssxref("round()")}} 
• {{cssxref("sign()")}} 
• {{cssxref("sin()")}} 
• {{cssxref("sqrt()")}} 
• {{cssxref("tan()")}} 
• {{cssxref("url()")}} 

Additional functions, including calc-mix(), crossorigin(), first-valid(), if(), integrity(), progress(), random(), random-item(), referrerpolicy(), sibling-count(), sibling-index(), src(), type(), and toggle(), are defined in the specifications, but not yet implemented in browsers.

Data types

• <angle-percentage>
• <angle>
• <animation-timeline>
• <attr-name>
• <attr-type>
• {{CSSxRef("<calc-keyword>")}}  (e, pi, infinity, {{glossary("NaN")}} )
• <calc-size-basis>
• <calc-sum>
• <custom-ident>
• <dashed-ident>
• <dimension>
• <easing-function>
• <first-valid()>
• <frequency>
• <frequency-percentage>
• <ident>
• <integer>
• <length-percentage>
• <length>
• <number>
• <percentage>
• <position>
• <ratio>
• <resolution>
• <rounding-strategy> (down, up, to-zero)
• <string>
• <syntax>
• <time-percentage>
• <time>
• <url>
• <url-modifier>
• <view-timeline-name>

Units

• % (percentage)
• cap
• ch
• cm
• deg
• dpcm
• dpi
• dppx
• dvb
• dvh
• dvi
• dvmax
• dvmin
• dvw
• em
• ex
• grad
• Hz
• ic
• in
• kHz
• lh
• lvb
• lvh
• lvi
• lvmax
• lvmin
• lvw
• mm
• ms
• pc
• pt
• px
• Q
• rad
• rcap
• rch
• rem
• rex
• ric
• rlh
• s
• svb
• svh
• svi
• svmax
• svmin
• svw
• turn
• vb
• vh
• vi
• vmax
• vmin
• vw
• x

Flex units (fr) and container units (cqb, cqh, cqi, cqmax, cqmin, cqw) are defined in the CSS grid layout and CSS conditional rules modules, respectively.

Unit categorizations

• Absolute length units (cm, in, mm, pc, pt, px, Q)
• Angle units (deg, grad, rad, turn)
• Default viewport units (vb , vh, vi , vmax, vmin, vw)
• Dynamic viewport units (dvb, dvh, dvi, dvmax, dvmin, dvw)
• Frequency units (Hz, kHz)
• Large viewport-percentage units (lvb, lvh, lvi, lvmax, lvmin, lvw)
• Local font-relative length units (cap, ch, em, ex, ic, lh)
• Physical units (cm, in, mm, pc, pt, Q)
• Relative length units (cap, ch, em, ex, ic, lh, rem, rlh, vb, vh, vi, vmax, vmin, vw)
• Resolution units (dpcm, dpi , dppx, x)
• Root font-relative length units (rcap, rch, rem, rex, ric, rlh)
• Small viewport-percentage unit (svb, svh, svi, svmax, svmin, svw)
• Time units (ms, s)
• Viewport units (dvh, dvw, lvh, lvw, svh, svw, vb , vh, vi , vmax, vmin, vw)
• Visual angle unit (px)

Key concepts

• {{glossary("Advance measure")}} 
• Bracketed range notation
• Component value combinators
• CSS-wide keywords
• {{glossary("Device pixel")}} 
• Functional notation
• {{glossary("Identifier")}} 
• {{glossary("Interpolation")}} 
• {{glossary("Keyword")}} 
• Math function
• Numeric data types
• {{glossary("Origin")}} 
• {{glossary("Pixel")}} 
• Textual data types
• {{glossary("URL")}} 
• Value definition syntax

Guides

• CSS data types

  • : Introduction to CSS data types that define typical values accepted by CSS properties and functions.

• Numeric data types

  • : Overview of the numeric data types, including integers, numbers, percentages, and dimensions, along with relative and absolute dimensions, angles, and time units.

• Textual data types

  • : Overview of the textual data types, including pre-defined keyword values, global CSS keyword values, and URLs.

• CSS value functions

  • : Overview of the CSS statements that invoke special data processing or calculations to return a CSS value for a CSS property.

• Using CSS math functions

  • : The CSS math functions that allow a property value to be written as a mathematical expression.

• Value definition syntax

  • : The formal grammar used to define the set of valid values for CSS properties and functions.

• Learn: Values and units

  • : A look at some of the most frequently used value types, what they are, and how they work.

Related

• CSS cascading and inheritance module

  • {{cssxref("initial")}} 
  • {{cssxref("inherit")}} 
  • {{cssxref("revert")}} 
  • {{cssxref("revert-layer")}} 
  • {{cssxref("unset")}} 
  • {{cssxref("all")}} 

• CSS grid layout module

  • {{cssxref("<flex>")}} 
  • Flex units (fr)

• CSS conditional rules module

  • Container units (cqb, cqh, cqi, cqmax, cqmin, cqw)

• CSS colors module

  • {{cssxref("<color>")}} 
  • {{cssxref("system-color")}} 
  • color-mix()

• CSS images module

  • {{cssxref("<image>")}} 
  • {{cssxref("<gradient>")}} 

Specifications

{{Specifications}} 

See also

• CSS syntax module
• CSS selectors module