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.
In formal CSS syntax, data types are denoted by a keyword placed between the inequality signs "
<" and "
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
- CSS-wide keyword:
- The value specified as the property's initial value.
- CSS-wide keyword:
- The computed value of the property on the element's parent.
- CSS-wide keyword:
- Acts as
initialdepending on whether the property is inherited or not.
- A user-defined identifier, for example the name assigned using the
grid-areaproperty. See more information on the
<custom-ident>with the additional restriction that it must start with two dashes, for example with CSS Custom Properties. See more information on the
- A quoted string, such as used for a value of the
contentproperty. See more information on the
- A pointer to a resource, for example as the value of
background-image. See more information on the
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.
- One or more decimal units 0 through 9. See more information on the
- Real numbers which may also have a fractional component, for example 1 or 1.34. See more information on the
- A number with a unit attached to it, for example 23px or 15em. See more information on the
- A number with a percentage sign attached to it, for example 10%. See more information on the
- A ratio, written with the syntax
<number> / <number>. See more information on the
- A flexible length introduced for CSS Grid Layout, written as a
frunit attached and used for grid track sizing. See more information on the
These types are used to specify distance and other quantities.
- Lengths are a
<dimension>and refer to distances. See more information on the
- Angles are used in properties such as
<linear-gradient>()and are a <dimension> with one of
turnunits attached. See more information on the
- Duration units are a
msunit. See more information on the
- Frequencies are a
kHzunit attached. See more information on the
- Is a <dimension> with a unit identifier of
x. See more information on the
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.
- A type that can accept a length or a percentage as a value. See more information on the
- A type that can accept a frequency or a percentage as a value. See more information on the
- A type that can accept an angle or a percentage as a value. See more information on the
- A type that can accept a time or a percentage as a value. See more information on the
- Specified as a keyword or a numerical color value. See more information on the
- 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.
The CSS Images Specification defines the data types which deal with images, including gradients.
- A url reference to an image or a color gradient. See more information on the
- A list of two or more color stops with optional transition information using a color hint.
<length-percentage>to indicate the color stop for this part of the gradient.
<length-percentage>to indicate how the color interpolates.
- Used for radial gradients; can have a keyword value of
- Determines the size of the radial gradient's ending shape. This accepts a value of a keyword or a
<length>but not a percentage.
- Defines the position of an object area. Accepts a keyword value such as
left, or a
|CSS Values and Units Module Level 4||Editor's Draft|
|CSS Values and Units Module Level 3||Candidate Recommendation||Initial definition.|