CSS Data Types
Learning outcomes:
- What are data types
- List of data types in CSS
What are 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:
<color>
for colornames,rgb()
,hsl()
or hexadecimal values.<length>
for instance 3px, 10em and hex<angle>
for2deg
,3rad
and2turn
<time>
for instance3s
,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%
.
A list of data types
Following is a list of some of the very common data types in CSS with the meaning of each one mentioned next to it.
<color>
- a color value.<custom-ident>
- a custom-identifier<gradient>
- thelinear-gradient()
orradial-gradient()
function<integer>
- a negative or positive whole number<length>
- a length value in absolute or relative units for instanepx
,em
<number>
- a number. Well you know this!<percentage>
- a number + the percent%
sign<position>
- wherever there is positioning involved in the property this is its type<single-transition-timing-function>
- a transition timing function keyword or thecubic-bezier()
function<string>
- a quoted value""
<time>
- a positive number with unitsms
ors
<transform-function>
- the transform functions<url>
- a URL within the functionurl()
Spread the word
Think that the content was awesome? Share it with your friends!
Join the community
Can't understand something related to the content? Get help from the community.