CSS Data Types

Here is a quick reference for CSS data types:

data type description, values/units, remark, example
<angle> degree of rotation
deg, rad, grad, turn
360 deg = 400 grad = 2π radian = 1 turn
transform: rotate(45deg)
<basic-shape> functions to define shapes
inset(), polygon(), circle(), ellipse()
inset(<shape-arg>{1,4} [round <border-radius>]?)
polygon([<fill-rule>,]? [<shape-arg> <shape-arg>]#)
circle([<shape-radius>]? [at <position>]?)
ellipse([<shape-radius>{2}]? [at <position>]?)
where: <shape-arg> = <length> | <percentage>, <shape-radius> = <length> | <percentage> | closest-side | farthest-side
shape-outside: inset(100px 100px 100px 100px);
shape-outside: polygon(0 0, 0 100%, 100% 100%);
shape-outside: circle(40%)
<blend-mode> calculating the final color value of a pixel when layers overlap
normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity
background-blend-mode: color;
mix-blend-mode: multiply;
<color> denotes a color in the sRGB color space
<keyword>, #hex, #hexdec, rgb(), rgba(), hsl(), hsla(), transparent, currentcolor
RGB cubic-coordinate system: #hex, rgb(), rgba()
HSL cylindrical-coordinate system: hsl(), hsla()
currentcolor is similar to inherit keyword
color: rebeccapurple;
color: hsla(240,100%,50%,0.05);
background: currentcolor;
<custom-ident> identifier token created by the stylesheet author to reference content in a different part of the stylesheet.
<identifier>
counter-increment: h1-counter; content: counter(h1-counter);
counter-reset: subSectionCounter;
@keyframes colorChange {…}
<frequency> denotes a frequency dimension
Hz, kHz
Introduced in CSS2 to define pitch of voice for aural media, deprecated since then. Reintroduced in CSS3, though none of the css properties are using this at the moment.
<gradient> CSS <image> made of a progressive transition between two or more colors
linear-gradient(), radial-gradient(), repeating-linear-gradient()
A CSS gradient is not a CSS <color> but an image with no intrinsic dimensions
background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
background: radial-gradient(red, yellow, rgb(30, 144, 255));
repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
<image> represents 2D image
url(), linear-gradient(), element()
  • intrinsic dimensions: .jpg, .png, etc.
  • several intrinsic dimensions: .ico
  • no intrinsic dimension, but with intrinsic aspect ratio: SVG
  • neither intrinsic dimensions, nor an intrinsic aspect ratio: CSS gradient
Used in background-image, list-style-image, border-image, cursor & content
url(img.jpg);
linear-gradient(to bottom, tomato, seagreen);
relement(#elementid);
<integer> denotes an +/- integer number
[+-]?<number>
used in properties like z-index, counter-increment, column-count, etc.
counter-increment: count1 count2 -6;
column-count: 3;
z-index: -2;
<length> denotes distance measurements
em, ex, ch, rem, vh, vw, vmin, vmax, px, mm, cm, in, pt, pc
Font-relative:
  • em: calculated font size
  • ex: font's x-height
  • ch: width of glyph '0'
  • rem: font-size of root element
    • Viewport percentage:
  • vh: viewport height / 100
  • vw: viewport width / 100
  • vmin: min(viewport height, viewport width) / 100
  • vmax: max(viewport height, viewport width) / 100
    • Absolute units:
  • px: relative to device
  • pt: 1/72 inch
  • pc: 12 pt = 1 pica
    		•
    border-width: 0.2ch;
    <number> integer/fractional number
    cubic-bezier(2.45, 0.6, 4, 0.1);
    left: -1e+7px;
    <percentage> percentage values
    <number>%
    font-size: 200%;
    <position> coordinate in a 2D space used to set a location relative to a box
    top, bottom, center, left, right, <percentage>, <length>
    background-position: center 80%;
    <ratio> describe aspect ratio in media queries
    <integer>/<integer>
    used in media queries
    @media screen and (device-aspect-ratio: 1280/720) { … }
    <resolution> denotes the pixel density of an output device
    dpi, dpcm, dppx
    used in media queries
    @media print and (min-resolution: 300dpi) { … }
    <shape> denotes the specific form of a region
    rect()
    rect(top, right, bottom, left) produces a rectangular region
    clip: rect(10px, 20px, 20px, 10px);
    <string> represents a string
    <Unicode characters delimited by " or '>
    multiline escaping by \ or \A
    content: "Awesome string with \Aline break";
    <time> time dimensions
    s, ms
    animation-duration: 0.5s;
    <timing-function> a mathematical function that describes how fast one-dimensional values change during transitions or animations
    cubic-bezier(), steps(), linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end
    multiline escaping by \ or \A
    transition-timing-function: ease-in-out;
    animation-timing-function: steps(4, end);
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    css web