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. |
Leave a Reply