Skip to main content

CSS data types

CSS data types define typical values (including keywords and units) accepted by CSS properties and functions. They are a special kind of component value type.

The most commonly-used types are defined in the CSS Values and Units specification. This specification also defines functional notations, which allow for more complex types or processing. Other types are defined in the specifications to which they apply.

Below you will find a reference to the types that you are most likely to come across, however it is not a comprehensive reference for all types defined in every CSS specification.

Syntax​

selector {
  property: <unit-data-type>;
}

In formal CSS syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">".

Textual data types​

These types include keywords and identifiers as well as strings, and URLs.

  • Pre-defined keywords
    • : Keywords with a pre-defined meaning, for example, the value of collapse for the {{cssxref("border-collapse")}} property.
  • CSS-wide keywords
    • : All properties, including custom properties, accept the CSS-wide keywords:
      • {{CSSXref("initial")}}
        • : The value specified as the property's initial value.
      • {{CSSXref("inherit")}}
        • : The computed value of the property on the element's parent.
      • {{CSSXref("revert")}}
        • : Rolls back the cascade to the value of the earlier origin.
      • {{CSSXref("unset")}}
        • : Acts as inherit or initial depending on whether the property is inherited or not.
  • {{cssxref("<custom-ident>")}}
    • : A user-defined identifier, for example the name assigned using the {{cssxref("grid-area")}} property.
  • {{cssxref("<dashed-ident>")}}
    • : A <custom-ident> with the additional restriction that it must start with two dashes, for example, with CSS Custom Properties.
  • {{cssxref("<string>")}}
    • : A quoted string, such as used for a value of the {{cssxref("content")}} property.
  • {{cssxref("url_value", "<url>")}}
    • : A pointer to a resource, for example as the value of {{cssxref("background-image")}}.

Numeric data types​

These data types are used to indicate quantities, indexes, and positions. The majority of these are defined in the Values and Units specification, however additional types are described in other specifications where they are specific to that specification alone — for example the fr unit in CSS grid layout.

  • {{cssxref("<integer>")}}
    • : One or more decimal units 0 through 9.
  • {{cssxref("<number>")}}
    • : Real numbers which may also have a fractional component, for example 1 or 1.34.
  • {{cssxref("<dimension>")}}
    • : A number with a unit attached to it, for example 23px or 15em.
  • {{cssxref("<percentage>")}}
    • : A number with a percentage sign attached to it, for example 10%.
  • {{cssxref("<ratio>")}}
    • : A ratio, written with the syntax <number> / <number>.
  • {{cssxref("<flex>")}}
    • : A flexible length introduced for CSS grid layout, written as a <number> with the fr unit attached and used for grid track sizing.

Quantities​

These types are used to specify distance and other quantities.

  • {{cssxref("<length>")}}
    • : Lengths are a <dimension> and refer to distances.
  • {{cssxref("<angle>")}}
    • : Angles are used in properties such as {{cssxref("gradient/linear-gradient", "linear-gradient()")}} and are a <dimension> with one of deg, grad, rad, or turn units attached.
  • {{cssxref("<time>")}}
    • : Duration units are a <dimension> with an s or ms unit.
  • {{cssxref("<frequency>")}}
    • : Frequencies are a <dimension> with a Hz or kHz unit attached.
  • {{cssxref("<resolution>")}}
    • : Is a <dimension> with a unit identifier of dpi, dpcm, dppx, or x.

Combinations of types​

Some CSS properties can take a dimension or a percentage value. In this case the percentage value will be resolved to a quantity that matches the allowable dimension. Properties which can accept a percentage in addition to a dimension will use one of the types listed below.

  • {{cssxref("<length-percentage>")}}
    • : A type that can accept a length or a percentage as a value.
  • {{cssxref("<frequency-percentage>")}}
    • : A type that can accept a frequency or a percentage as a value.
  • {{cssxref("<angle-percentage>")}}
    • : A type that can accept an angle or a percentage as a value.
  • {{cssxref("<time-percentage>")}}
    • : A type that can accept a time or a percentage as a value.

Color​

The CSS Color Specification defines the data type, and other types which relate to color in CSS.

    • : Specified as a keyword or a numerical color value.
  • {{cssxref("<alpha-value>")}}
    • : Specifies the transparency of a color. May be a <number>, in which case 0 is fully transparent and 1 is fully opaque, or a <percentage>, in which case 0% is fully transparent and 100% fully opaque.
  • {{cssxref("<hue>")}}
    • : Specifies the <angle>, with a unit identifier of deg, grad, rad, or turn, or unitless <number> interpreted as deg, of the {{glossary("color wheel")}} specific to the <absolute-color-functions> of which it is a component.

Images​

The CSS Images Specification defines the data types which deal with images, including gradients.

  • {{cssxref("<image>")}}
    • : A URL reference to an image or a color gradient.
  • {{cssxref("<color-stop-list>")}}
    • : A list of two or more color stops with optional transition information using a color hint.
  • {{cssxref("<linear-color-stop>")}}
    • : A <color> and a <length-percentage> to indicate the color stop for this part of the gradient.
  • {{cssxref("<linear-color-hint>")}}
    • : A <length-percentage> to indicate how the color interpolates.
  • {{cssxref("<ending-shape>")}}
    • : Used for radial gradients; can have a keyword value of circle or ellipse.
  • {{cssxref("<size>")}}
    • : Determines the size of the radial gradient's ending shape. This accepts a value of a keyword or a <length> but not a percentage.

2D positioning​

The {{cssxref("<position>")}} data type is interpreted as defined for the {{cssxref("<background-position>")}} property.

  • {{cssxref("<position>")}}
    • : Defines the position of an object area. Accepts a keyword value such as top or left, or a <length-percentage>.

Calculation data types​

These data types are used in CSS math function calculations.

  • {{cssxref("<calc-sum>")}}
    • : A calculation which is a sequence of calculation values interspersed with addition (+) and subtraction (-) operators. This data type requires both values to have units.
  • {{cssxref("<calc-product>")}}
    • : A calculation which is a sequence of calculation values interspersed with multiplication (*) and division (/) operators. When multiplying, one value must be unitless. When dividing, the second value must be unitless.
  • {{cssxref("<calc-value>")}}
    • : Defines accepted values for calculations, values such as {{cssxref("<number>")}}, {{cssxref("<dimension>")}}, {{cssxref("<percentage>")}}, {{cssxref("<calc-keyword>")}} or nested {{cssxref("<calc-sum>")}} calculations.
  • {{cssxref("<calc-keyword>")}}
    • : Defines a number of CSS keywords representing numeric constants such as e and π, that can be used in CSS math functions.

Specifications​

See also​