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:

PropertyDescription<custom-ident>A user-defined identifier, such as a name given with thegrid-areaproperty.<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 thecontentproperty.url()A reference to a resource, such thebackground-imagevalue.

Numeric Data Types

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

PropertyDescription<integer>One or more decimal units (09).<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:

PropertyDescription<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:

PropertyDescription<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:

PropertyDescription<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 thehexadecimal color syntaxof ansRGBcolor 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 betweenhuevalues. 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:

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

2D Positioning

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

PropertyDescription<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:

PropertyDescription<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:

PropertyDescription<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 fordisplayproperty in CSS 2, which required separate keywords for block-level and inline-level variants of the same layout model.<display-listitem>The keywordlist-itemmakes the element to generate a::markerpseudo-element with the content that is specified by thelist-styleproperties, along with a main box of the specified type for its own contents.<display-outside>An element’s outerdisplaytype, 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:

PropertyDescription<absolute-size>Defines absolute font size in thefontshorthand andfont-sizeproperties.<basic-shape>Defines different shapes used for properties such asclip-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 ascontent-boxandborder-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 shorthandoverflowproperty and the longhandoverflow-block,overflow-inline,overflow-x, andoverflow-yproperties 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.