CSS – Data Types


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.

Advertisements

”;

Leave a Reply

Your email address will not be published. Required fields are marked *