CSS - Data Types

CSS data types define the types of values that can be used for various CSS properties. Each CSS property expects a specific type of value, and understanding these data types is essential for properly styling and formatting web content.

The types listed below are the most common, however it is not a complete list of all types defined in any CSS specification.

Syntax

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

CSS syntax uses a keyword between the inequality signs "<" and ">" to indicate data types.

Textual Data Types

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

Pre-defined Keywords

Represents a predefined keyword that is specific to the property it's used with (e.g., auto, inherit, none).

CSS-wide keywords

The table given below lists all the CSS-wide keywords:

Property	Description
<custom-ident>	A user-defined identifier, such as a name given with the grid-area property.
<dashed-ident>	Using CSS Custom Properties, a <custom-ident> begin with two dashes.
<string>	A string that has been quoted, such as the value for the content property.
url()	A reference to a resource, such the background-image value.

Numeric Data Types

These data types represent quantities, indexes, and positions. The following table lists all the numeric data types:

Property	Description
<integer>	One or more decimal units (0–9).
<number>	Real numbers may include a fractional component, such as 1 or 1.54.
<dimension>	A numerical value that includes a unit, such as 23px or 15em.
<percentage>	A numerical value that includes a percentage symbol, such as 15%.
<ratio>	A ratio is represented as <number> / <number>.
<flex>	CSS Grid Layout introduces a flexible length, represented by a <number> with the fr unit attached for grid track sizing.

Quantities

Distance and other quantities are defined using these types. The following table lists all the quantities:

Property	Description
<length>	Lengths are a dimension that refers to distances.
<angle>	Angles are represented as a <dimension> with deg, grad, rad, or turn units, and used in properties such as linear-gradient().
<time>	Duration units are represented as a <dimension> with a s or ms unit.
<resolution>	This is a <dimension> with the unit identifier dpi, dpcm, dppx, or x.

Combinations of Types

CSS properties that accept both a dimension and a percentage value fall in this category. The percentage value will be converted to a quantity relative to the allowable dimension. Properties that take both a percentage and a dimension will use one of the following types:

Property	Description
<length-percentage>	A type that can take a a length or a percentage value.
<angle-percentage>	A type that can take a a angle or a percentage value.
<time-percentage>	A type that can take a a time or a percentage value.

Color

Color related properties define the <color> data type and additional types related to colors.

The following table lists all the color related data types:

Property	Description
<color>	A color represented as a keyword or a numerical value.
<color-interpolation-method>	Determines the color space used when creating a transition between different <color> values.
<hex-color>	Describes the hexadecimal color syntax of an sRGB color using the primary color components (red, green, blue) denoted as hexadecimal numbers, along with its transparency.
<system-color>	Commonly linked to the default color selections for different components on a webpage.
<alpha-value>	Represents the transparency of a color. The value can be either a <number> (0 is fully transparent, 1 is fully opaque) or a <percentage> (0 is fully transparent, 100% is fully opaque).
<hue>	Define the <angle> of the color wheel for the <absolute-color-functions> component using units such as, deg, grad, rad, turn, or a unitless number (interpreted as deg).
<hue-interpolation-method>	Determines the algorithm that is used for interpolation between hue values. This method specifies how to find a midpoint between two hue values based on a color wheel. It is a component of the <color-interpolation-method> data type.
<named-color>	Specified as a <ident> in syntax, depicts colors by names such as red, blue, black, or light green.

Images

CSS Images Specification defines image-related data types, such as gradients. The following table lists all the images related data types:

Property	Description
<image>	A URL pointing to an image or color gradient.

2D Positioning

The following table lists all the 2D Positioning related data types:

Property	Description
<position>	Determines the position of an object region by providing a keyword value, such as top or left, or a <length-percentage>.

Calculation Data Types

CSS math functions use these data types in calculations. The following table lists all the calculation data types:

Property	Description
<calc-sum>	A calculation is a series of calculated values separated by addition (+) and subtraction (-) operators. This data type requires that both values contain units.
<calc-constant>	Defines CSS keywords for numeric constants such as e and π, which can be used in CSS math functions.

Display

The table given below lists all the display related data types:

Property	Description
<display-box>	Determines if an element creates display boxes or not.
<display-inside>	Determines the inner display of an element, which specifies the formatting context type, for a non-replaced element.
<display-internal>	Determines the internal display values, which have relevance only to that particular layout model.
<display-legacy>	A single-keyword syntax has been used for display property in CSS 2, which required separate keywords for block-level and inline-level variants of the same layout model.
<display-listitem>	The keyword list-item makes the element to generate a ::marker pseudo-element with the content that is specified by the list-style properties, along with a main box of the specified type for its own contents.
<display-outside>	An element's outer display type, which is essential in flow layout, is determined by the <display-outside> keywords.

Other Data Types

The table given below lists some more data types:

Property	Description
<absolute-size>	Defines absolute font size in the font shorthand and font-size properties.
<basic-shape>	Defines different shapes used for properties such as clip-path, shape-outside, and offset-path.
<blend-mode>	Specifies the color scheme that should be used when elements overlap.
<box-edge>	Defines different box edges, such as content-box and border-box.
<easing-function>	Control the speed of a transition or animation between two states of an element.
<filter-function>	Signifies a graphical effect, which changes the appearance of an input image.
<generic-family>	Signifies the keyword values for generic font families.
<gradient>	Demonstrates a progressive transition between two or more colors.
<ident>	Signifies an arbitrary string that is used as an identifier.
<line-style>	Specifying how a line appears or doesn't appear in a certain context are included in the <line-style> enumerated value type.
<overflow>	The keyword values used in relation to the shorthand overflow property and the longhand overflow-block, overflow-inline, overflow-x, and overflow-y properties are indicated by the enumerated value type <overflow>.
<relative-size>	Define a relative size to the calculated size of the parent element.
<transform-function>	The transformation functions are responsible for rotating, scaling (resizing), skewing (distorting), or moving an element in two-dimensional (2D) and three-dimensional (3D) space.

Print Page