Estelle Weyl | @estellevw | Github | Press key to advance.

Units & Values

  • Numeric data types
    • Integer
    • Number
    • Percentage
    • Dimensions
      • <length>
      • <angle>
      • <time>
      • <frequency>
      • <resolution>
  • Non-numeric data types
    • Keywords
      • Global values
      • all property
      • <position>
    • Strings
      • <string> and <ident>
      • Developer Tools
      • CSS Functions
        • <url()
        • <image> functions
        • All the CSS functions

estelle.github.io/CSS/values/

Numeric data types

Numeric data types

<integer>
0 to 9, or lots of them. Optional - or +
<number>
Float, with or without a decimal. Optional - or +
<percentage>
A fraction of some other value, and relative to that value
<dimension>
A <number> with a unit attached to it

<integer>

  • 0 to 9, or lots of them.
    0
    382
  • Optional - or +
    +18
    -1

<number>

  • Float, with or without a decimal.
    0
      3.82
  • Optional - or +
    +10.8
      -1.333

<percentage>

  • A fraction of some other value
    line-height: 60%;
    width: 60%;
  • Relative to that value
    li {height: 300px;} 
    pre {height: 33.33%;}

<dimension>

<number> with a unit

  • <length>
  • <angle>
  • <time>
  • <frequency>
  • <resolution>

<length>

Absolute

Actual physical measurements (that might not match a ruler).
cm, mm, Q, in, pt, pc, px

Relative

Relative to some other measurement.
em, ex, cap, ch, ic, rem, lh, rlh vw, vh, vi, vb, vmin, vmax

Note: <length-percentage>

Absolute units of length

Unit Name Equivalent to
cm Centimeters 1cm = 96px/2.54
mm Millimeters 1mm = 1/10th of 1cm
Q Quarter-millimeters 1Q = 1/40th of 1cm
in Inches 1in = 2.54cm = 96px
pc Picas 1pc = 1/16th of 1in
pt Points 1pt = 1/72th of 1in
px Pixels 1px* = 1/96th of 1in
One pixel. For screen displays, it traditionally represents one device pixel (dot). When hi-dpi (like printers and phones) 1px = 1/96th of 1in.

Relative units of length

Unit Relative to
em Font size of the element.
ex x-height of the element's font.
ch Average character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.
rem Font size of the root element.
vw 1% of viewport's width.
vh 1% of viewport's height.
vmin 1% of viewport's smaller dimension.
vmax 1% of viewport's larger dimension.

viewport lengths

vw | vh | vmin | vmax
5vw     /* 5% of the width of the viewport */
7vh     /* 7% of the height of the viewport */
4vmin   /* 4% of the viewport height or width, whichever is smaller */
8vmax   /* 8% of the viewport height or width, whichever is larger */

Relative units of length

Unit Relative to
cap Cap height (the nominal height of capital letters) of the element's font.
ic Average character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.
lh Line height of the element.
rlh Line height of the root element.
vi 1% of viewport's size in the root element's inline axis.
vb 1% of viewport's size in the root element's block axis.

Newer values

2vi     /* 1% of containing block, in the direction of the root element’s inline axis.
    4vb     /* 4% of the containing block, in the direction of the root element’s block axis.

Length Units

Try it out

<angle> Units

Angle values are represented by <angle> in the spec:

Unit Name Description
deg Degrees There are 360 degrees in a full circle.
grad Gradians There are 400 gradians in a full circle.
rad Radians There are 2π radians in a full circle.
turn Turns There is 1 turn in a full circle.

Angle Units

Try it out

Angle Units

conic in supporting browsers

<time units

Time values are represented by the type <time>.

Unit Name Description
s Seconds
ms Milliseconds There are 1,000 milliseconds in a second.

The unit identifier -- the s or ms -- is required.

<ime> values

Try it out

<frequency>

Frequency values are represented by the type <frequency>.

Unit Name Description
Hz Hertz Represents the number of occurances per second.
kHz KiloHertz A kiloHertz is 1000 Hertz.

1Hz, which can also be written as 1hz or 1HZ, is one cycle per second.

<resolution>

Resolution units are represented by the type <resolution>.

Unit Description
dpi Dots per inch.
dpcm Dots per centimetre.
dppx, x Dots per px unit.

Represents the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel.

<resolution> units

Try it out

Non-numeric data types

Keywords

Global property values

Explicit Defaulting: CSS-wide property values

initial
Sets property to its initial value.
inherit
Makes element's property the same as its parent.
unset
Resets to inherited value if it inherits from its parent. Otherwise, set to initial value.

all property

all property lets you reset all properties to their initial, inherited, reverted, or unset state at once.

all: initial | inherit | unset | revert

cascade matters!

p {
  color: red;
  all: unset;
}
div {
  all: unset;
  color: blue;
    }

Impacts all properties except unicode-bidi and direction.

New: Global property value

revert
Resets property to UA stylesheet value (or user stylesheet, if any exist). (FF/Saf)

Defaulting

none / 0
Often seen in the wild. Valid when valid, but better to use initial to undo instead.

all property

Custom properties are not reset by the all property

initial | inherit | unset | revert

The all property resets all of an element's properties, except unicode-bidi and direction).

It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.

initial
Specifies that all the element's properties should be changed to their initial values.
inherit
Specifies that all the element's properties should be changed to their inherited values.
unset
Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.
revert
Specifies behavior that depends on the stylesheet origin to which the declaration belongs

Keyword values

Supported text-align values

left | right | center | justify | start | end | match-parent
/* Keyword values */         /* Global values */
text-align: left;            text-align: inherit;
text-align: right;           text-align: initial;
text-align: center;          text-align: unset;
text-align: justify;         text-align: revert;
text-align: start;
text-align: end;
text-align: match-parent;
  • appear literally, without quotes
  • case-insensitive
  • will review as we look at the property
  • Avoid in custom identifiers

<position>

Values

center | top | right | bottom | left 
  • Specified with one or two keywords
  • Optional offsets on TRBL

Offsets

 <percentage> | <length>

<position>


  • position can be outside the parent

Mixed values

border-width property

[ <length> | thick | medium | thin ]{1,4}
border-width: 1px thin;
border-width: thick thin thin thick;
border-width: medium;
border-width: 5px 10px thin thick; 

Strings

<string>

<string>

  • Quoted string of characters
  • Double or single quotes
  • Case-sensitive
  • HTML entities (like &amp;) won't be parsed
  • Unicode characters start with a \, or correct charset
  • Not parsed
content: ' (pdf)';
font-family: "myAwesomeFont", serif;
quotes: "«" '»' "‹" '›';

<ident>

<ident> or <custom-ident>

  • idents, or custom identifiers, are unquoted
  • case-sensitive
  • can contain [A-Za-z0-9], hyphen (-), underscore (_), escaped character preceded by a backslash (\), and unicode characters (\123)
  • can NOT start with a digit, two hyphens, a hyphen+digit
  • can NOT be unset, initial, reset, inherit, or none
  • Should not be a property name or keyword value used elsewhere in CSS

<custom-ident> use cases

counter-reset: yourCounter;
counter-increment: myCounter;

grid-row-start: someGridArea;
grid-row-end: someOtherGridArea;
grid-column-start: anotherArea;
grid-column-end: oneMore;

Reading the specifictions

Property names as values == <custom-ident>

will-change: transform;
transition-property: opacity;

<custom-ident> | <string>

animation-name: myAnimation; 

@keyframes 'myAnimation' {
    0% {transform: translatex(0);}
  100% {transform: translatex(100vw);}
}

font-family:  Helvetica Neue;
font-family: "Helvetica Neue";

DevTools

Inspect how you can increase and decrease length units. Arrow up and down to increase / decrease. With Shift and Alt to jump by 10 and 0.1 respectively.

Clear out a keyword, and hit up or down to see all the keyword option values. This shows keyword values only.

CSS Functions

<url> function

Simple usage

url(https://example.com/images/myImg.jpg);
url(data:image/png;base64,iRxVB0…);
url(myFont.woff);
url(#IDofSVGpath);

at-rules

@document url("https://www.example.com/") { ... }  
@import url("https://www.example.com/style.css");
@namespace url(http://www.w3.org/1999/xhtml);

Properties accepting <url> function

background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
list-style-image: url('../images/bullet.jpg');

content: url("pdficon.jpg");
cursor: url(mycursor.cur);

border-image-source: url(/media/diamonds.png);
src: url('fantasticfont.woff');

offset-path: url(#path);
mask-image: url("masks.svg#mask1");

Properties accepting <url> function

background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;

border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;

background-image: cross-fade(20% url(first.png), url(second.png));

mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);

content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); 

<image> functions

url(test.jpg)
linear-gradient(blue, red)
radial-gradient(blue, red)
conic-gradient(blue, red)
repeating-linear-gradient(blue, red 20%)
repeating-radial-gradient(blue, red 20%)
repeating-conic-gradient(blue, red 20%)
element(#realid)
image(ltr 'arrow.png#xywh=0,0,16,16', red) 
cross-fade(url(twenty.png) 20%, url(eighty.png)) 
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
paint(worklet)

Other CSS Functions

transform:

  • rotate()
  • rotate3d()
  • rotateX()
  • rotateY()
  • rotateZ()
  • saturate()
  • matrix()
  • matrix3d()
  • scale()
  • scale3d()
  • scaleX()
  • scaleY()
  • scaleZ()
  • skew()
  • skewX()
  • skewY()
  • translate()
  • translate3d()
  • translateX()
  • translateY()
  • translateZ()
  • perspective()

content:

  • attr()
  • counter()
  • counters()
  • target-counter()
  • target-counters()
  • target-text()

filter:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()

Other CSS Functions

font-variant-alternates:

  • annotation()
  • character-variant()
  • ornaments()
  • styleset()
  • stylistic()
  • swash()

list-style:

  • symbols()

width/grid-template-rows:

  • calc()
  • clamp()
  • max()
  • min()
  • minmax()
  • fit-content()
  • repeat()

clip-path/shape-outside:

  • cirlcle()
  • ellipse()
  • inset()
  • path()
  • polygon()
  • rect()

color:

  • hsl()
  • hsla()
  • rgb()
  • rgba()

animation-timing-function:

  • cubic-bezier()
  • steps()

variables

  • env()
  • var()

Colors & Transparency

Next ➹