CSS Data Types

CSS has a ton of properties to play with text, spacing, backgrounds, colors, borders, outlines, stacking, and so on. Each property can take on a given set of values.

For instance font-size can take length values such as 2em, 3px, 4pc etc or keywords like larger, shorter etc. Similarly color can take on color names, rgb(), hsl() or hexadecimal values.

In other words, every property can take on a given set of acceptable data types.

In the specification of CSS, data types are written in the form <type> where type is a valid CSS data type enclosed within angle brackets.

Some examples of these data types are:

1. <color> for colornames, rgb(), hsl() or hexadecimal values.
2. <length> for instance 3px, 10em and hex
3. <angle> for 2deg, 3rad and 2turn
4. <time> for instance 3s, 1ms

and so on...

Now one thing to remember over here is that these data types are associated with values only - there are no types for properties in CSS; just data types for values.

Therefore, formally when expressing CSS properties we can use this data type syntax i.e <type> to indicate the values a given property can take.

Consider the example below where we demonstrate the acceptable values of background-color in a <type> form:

<color> here indicates that the value for background-color can be a valid color value only: colornames, rgb(), hsl() or hexadecimal values.

For one more example let's consider transition-duration which takes a time for the duration of a transition.

And just like before, <time> here indicates that the value for transition-duration can be a time value only: an integer followed by a ms or s unit.

And different properties can be expressed in this way for their acceptable value sets.

Now sometimes, in fact many times, a property can take more than one data type as in the snippet below - in such cases we usually seperate the various data types using || which means OR.

This here means that width can take either <length> values like 2px OR <percentage> values like 100%.

Following is a list of some of the very common data types in CSS with the meaning of each one mentioned next to it.

1. <color> - a color value.
2. <custom-ident> - a custom-identifier
3. <gradient> - the linear-gradient() or radial-gradient() function
4. <integer> - a negative or positive whole number
5. <length> - a length value in absolute or relative units for instane px, em
6. <number> - a number. Well you know this!
7. <percentage> - a number + the percent % sign
8. <position> - wherever there is positioning involved in the property this is its type
9. <single-transition-timing-function> - a transition timing function keyword or the cubic-bezier() function
10. <string> - a quoted value ""
11. <time> - a positive number with units ms or s
12. <transform-function> - the transform functions
13. <url> - a URL within the function url()