All the Generic CSS Data Types

Values for properties in CSS can be in a number of formats. In order for a user agent to be able to determine if a value is valid, it needs to make sure it conforms to one of the speicfic types of values. These are called data types, and are typically written in the specs like <this>.

There are two kinds of data types - specific and generic. Specific data types are related a single property or a small group of properties. For example, the <transform-function> data type is used as the value for the transform property alone.

Generic data types, on the other hand, are not related to any specific property. For example we can have a value of 10px, which is a <length> data type, for the margin, font-size or a number of other propertes.

In this article, I'm going to give an overview of all the generic data types.

Category	Name	Type
Textual	Keywords	<ident>
Custom Keywords	<custom-ident>
Quoted Strings	<string>
Resource Locators	<url>
Basic Numeric	Integers	<integer>
Real Numbers	<number>
Ratios	<ratio>
Percentages	<percentage>
Dimensions	Distances	<length>
Angles	<angle>
Duration	<duration>
Frequency	<frequency>
Resolution	<resolution>
Other	Colours	<color>
Images	<image>
Position	<position>

Textual Data Types #

Keywords #

The <ident> data type refers to the pre-defined keywords in CSS. This includes both the unique values for certain properties, for example block for the display property, as well as the CSS-wide values initial, inherit and unset (See Initial, Inherit, Unset, and Revert).

.foo {
  border-color: red;
  position: inherit;
}

These keywords are case-insensitive and must always be written without quotes, less they be misinterpreted as the <string> data type.

Custom Keywords #

The <custom-ident> (also referred to as <user-ident>) data type refers to keywords that have been defined by the author of the stylesheet. There are restrictions as to what can be a valid <custom-ident>, for example it cannot be one of the CSS-wide values.

A common example of a custom keyword is the value for the animation-name property. This property can accept as its value the name of a custom animation, as defined by the stylesheet author.

@keyframes hulkify {

  from {
    color: pink;
    transform: scale(1);
  }

  to {
    color: green;
    transform: scale(2);
  }

}
.bruce-banner { animation-name: hulkify; }

Quoted Strings #

The <string> data type refers to any quoted string. The text within the quotes can be any sequence of Unicode characters.

.foo::after {
  content: "Hello, world!";
}
.foo::before {
  content: "We can add 'quotes' within quotes \A And move to a separate line";
}

Resource Locators #

The <url> data type is used to reference a resource file or fragment. This data type is typically written using the url() function, but can be represented as a <string> in some cases, notably with the @import rule.

There are three types of URLs that can be used with this data type -

• Absolute URLs are those that specify a protocol and domain. The resource these URLs direct to are not necessarily in the same domain as the stylesheet they are referred from.
• Relative URLs are those that are refer to a file using the referring stylesheet's location as the base location.
• Fragment URLs are used to refer to elements in the host document itself. The reference is the ID of the element, not a path to a file.

 /* Absolute URL */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400");

 /* Realtive URL */
.foo { background-image: url("../img/bg.png"); }
@import "components/buttons.css";

 /* Fragment URL */
.bar { filter: url("#blurFilter"); }

Basic Numeric Data Types #

Integers #

An <integer> data type is the same as an integer as defined mathematically. It is a whole number, i.e. not a fraction, and can be position or negative. The first digit may be preceded by a - or + to indicate it's sign, although a + is implied if nothing is specified.

.foo { z-index: 10; }
.foo { z-index: +10; }
.bar { z-index: -10; }

Real Numbers #

The <number> data type is a "real number". It can be an <integer>, 0, or a fraction written as a decimal. Like integers, real numbers can be positive or negative, as indicated by a sign preceding the first digit.

.foo { line-height: 3; }
.bar { line-height: -2.5; }
.foo { line-height: +5.5; }

Ratios #

The <ratio> data type specifies a relationship between two numbers, specifically two positive <integer>s. Although ratios can be written in different ways in mathematics, in CSS they are always written as <integer> / <integer>.

Ratio data types are typically used in media queries to target device aspect ratios.

@media screen and (device-aspect-ratio: 16/9) { /* Wide screen displays, iPhone 5 */ }
@media screen and (device-aspect-ratio: 4/3) { … }

Percentages #

The <percentage> data type is made up of a <number> followed by a % sign. It represents a value that is a fraction of some other value with it's own data type. Therefore, we can have different kinds of the percentage data type, depending on what data type the value is.

• The <length-percentage> data type represents a fraction of a <length> value.
• The <number-percentage> data type represents a fraction of a <number> value.
• The <angle-percentage> data type represents a fraction of a <angle> value.
• The <time-percentage> data type represents a fraction of a <time> value.
• The <frequency-percentage> data type represents a fraction of a <frequency> value.

.foo {
	width: 50%; /* <length-percentage> */
	line-height: 200% /* <number-percentage> */
	voice-pitch: 25% /* <frequency-percentage> */
}

Dimensional Data Types #

Dimensions are numeric data types, specifically <number>s, but qualified by a unit of measurement. They are written as a <number> followed by the unit identifier. When the <number> is 0, however, it can be written without it's unit.

Distances #

The <length> data type represents units of distance. There are two types of length units.

• Absolute units, for example px, cm, and pt, are fixed and (mostly) relate to some physical measurement. Once they are declared, their size cannot be altered by changing the font size of a containing element.
• Relative units, for example em, rem, and the viewport units, do not have an objective measurement. Instead, their actual size is determined by the size of a parent element. This means that their size can be altered by changing the sizing of that dependent element.

(See CSS Font Sizing)

.foo {
	font-size: 16px; /* absolute */
	width: 50vw; /* relative */
}

Angles #

The <angle> data type represents an angle of a circle. There are four units we can use to define this angular dimension.

• Thedeg unit represents the angle in Degrees. There are 360 degrees in a full circle.
• Thegrad unit represents the angle in Gradians. There are 400 gradians in a full circle.
• Therad unit represents the angle in Radians. There are 2πrad in a full circle (roughly 57.29rad).
• Theturn unit represents the angle in Turns. There is 1 turn in a full circle.

These units can be positive or negative, denoting if the turn is happening clockwise or anti-clockwise, respectively. Below is an example of how a 90 degrees clockwise turn can be written in each of these units.

.foo {
    /* Going clockwise */
	transform: rotate(90deg);
	transform: rotate(100grad);
	transform: rotate(0.25turn);
	transform: rotate(1.57rad);

	/* Going anti-clockwise */
	transform: rotate(-270deg);
	transform: rotate(-300grad);
	transform: rotate(-1.25turn);
	transform: rotate(-55.72rad);
}

Duration #

The <time> data type represents a unit of time. There are two units we can use to define duration.

• The s unit represents a Second.
• The ms units represents a Millisecond. There are 1000 milliseconds in one second.

.foo { transition-duration: 1s; }
.bar { transition-duration: 1000ms; }

Frequency #

The <frequency> data type represents the sound frequency. There are two units we can use to define frequency.

• The kHz unit represents a KiloHertz.
• The Hz units represents a Hertz. There are 1000 KiloHertz in one Hertz.

.foo { voice-pitch: 250Hz; }
.bar { voice-pitch: 1kHz; }

Resolution #

The <resolution> data type represents resolution of the user's current device. The resolution itself is the size of a single "dot". The size of this dot is calculated by indicating how many of them will fit in a CSS inch, centemetre, or pixel. Depending on which CSS unit we are using, we can specify resolution in one of four units.

• The dpi unit represents a represents how many dots will fit in a CSS Inch.
• The dpcm unit represents a represents how many dots will fit in a CSS Centemetre.
• The dppx unit represents a represents how many dots will fit in a CSS Pixel.

@media (min-resolution: 100ddpx) { .. }
@media (min-resolution: 100dpcm) { .. }
@media (min-resolution: 300dpi) { /* Retina display */ }

Other Data Types #

Colours #

The <color> data type is used to define a colour value. The data type can be one of two formats.

• A keyword, which can either one of the pre-defined colours (e.g. cornflowerblue), the transparent keyword, or the currentColor keyword.
• A numeric value using one of the colour notations; #rgb``rgb(), rgba(), hsl(), hsla().

Below is an example of how we can achieve the colour black using these different formats.

.foo {
   color: black;
   color: #000;
   color: rgb(0,0,0);
   color: rgba(0,0,0,1);
   color: hsl(0,0%,0%);
   color: hsla(0,0%,0%, 1);
}

Images #

The <image> data type represents a 2D image. It can be one of three formats.

• A URL reference, specified using the <url> data type.
• An element in the document, using the element() function. (Note - This function is has very limited support).
• A gradient function, using the <gradient> data type.

.foo { background-image: url('path/to/bg.png'); }
.bar { background-image: element('#background'); }
.baz { background-image: linear-gradient(white, gray); }

Position #

The <position> data type denotes the position of an element within a containing area or element. It can be one of three other data types -

• A keyword of either top, right, bottom, left, or center.
• A length value.
• A percentage, specifically <length-percentage>, value.

Below is an example of how to achieve getting a background image (100x100px) to be positioned in the bottom right hand corner of it's container (300x300px) -

.foo {
  background-position: right bottom;
  background-position: 200px 200px;
  background-position: 100% 100%;
}