Units & Values

estelle.github.io/CSS/values/

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

<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

/* 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 &) 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()

<number> with a unit

Absolute

Relative

Explicit Defaulting: CSS-wide property values

Values

Offsets

border-width property

<string>

<ident> or <custom-ident>

Property names as values == <custom-ident>

Next ➹

`<number>` with a unit

`border-width` property

`<ident>` or `<custom-ident>`

Property names as values == `<custom-ident>`