Values and Units

<color>

/* <named-color> */
color: white;
color: black;
color: red;
color: green;
color: blue;
color: cyan;
color: rebeccapurple;

/* <hex-color> (#rrggbb | #rgb | #rrggbbaa | #rgba)*/
color: #ffffff;
color: #000000;
color: #ff0000;
color: #00ff00;
color: #0000ff;
color: #00ffff;
color: #663399;
color: #639;
color: #66339977;
color: #6397;

/* <rgb-color> (rgb(), rgba()) */
color: rgb(255, 255, 255)
color: rgb(0, 0, 0)
color: rgb(255, 0, 0)
color: rgb(0, 255, 0)
color: rgb(0, 0, 255)
color: rgb(0, 255, 255)
color: rgb(102, 51, 153)
color: rgba(102, 51, 153, 0.5);

/* <hsl-color> (hsl(), hsla()) */
color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 0%);
color: hsl(0, 100%, 50%);
color: hsl(120, 100%, 50%);
color: hsl(240, 100%, 50%);
color: hsl(180, 100%, 50%);
color: hsl(270, 50%, 40%);
color: hsla(270, 50%, 40%, 0.5);

Color Table

<named-color> <hex-color> <rgb-color> <hsl-color>
white #ffffff rgb(255, 255, 255) hsl(0, 0%, 100%)
black #000000 rgb(0, 0, 0) hsl(0, 0%, 0%)
red #ff0000 rgb(255, 0, 0) hsl(0, 100%, 50%)
lime #00ff00 rgb(0, 255, 0) hsl(120, 100%, 50%)
green #008000 rgb(0, 128, 0) hsl(120, 100%, 25%)
blue #0000ff rgb(0, 0, 255) hsl(240, 100%, 50%)
cyan #00ffff rgb(0, 255, 255) hsl(180, 100%, 50%)
rebeccapurple #639
#663399
#663399ff		 rgb(102, 51, 153)
rgba(102, 51, 153, 1)		 hsl(270, 50%, 40%)
hsla(270, 50%, 40%, 1)
rebeccapurple 50% #6397
#66339977		 rgba(102, 51, 153, 0.5) hsla(270, 50%, 40%, 0.5)

Example

h1 {
  color: red;
}

p {
  color: rgb(255, 0, 0);
}

<generic-family>

Lorem Lorem Lorem Lorem Lorem
<generic-family> <family-name>
serif Times, Times New Roman, Georgia, Century, Lucida, Didot
sans-serif Arial, Arial Black, Open Sans, Lucida Sans, Trebuchet MS, Verdana, Helvetica, Helvetica Neue, Gill Sans, Futura, San Fransisco, Tahoma, Ubuntu
monospace Courier, Courier New, Andale Mono, Monaco
cursive Brush Script MT, Comic Sans MS, Apple Chancery, Zapfino, Bradley Hand, Savoye Let
fantasy Impact, Papyrus, Luminari, Chalkduster, Chalkboard, Marker Felt, Trattatello, Cochin

Default fonts

<generic-family> Preview
serif Lorem ipsum
sans-serif Lorem ipsum
monospace Lorem ipsum
cursive Lorem ipsum
fantasy Lorem ipsum

Chrome > settings > Appearance > Customize fonts

<family-name>

<family-name> <generic-family> Preview
Times New Roman serif Lorem ipsum
Georgia serif Lorem ipsum
Arial sans-serif Lorem ipsum
Arial Black sans-serif Lorem ipsum
Trebuchet MS sans-serif Lorem ipsum
Verdana sans-serif Lorem ipsum
Courier New monospace Lorem ipsum
Andale Mono monospace Lorem ipsum
Brush Script MT cursive Lorem ipsum
Comic Sans MS cursive Lorem ipsum
Impact fantasy Lorem ipsum
Webdings fantasy Lorem ipsum

Font: Web safe fonts (Core fonts for the Web)

<length>

Relative length units

Font-relative lengths

Unit Description Style Syntax Preview
ch 0-width font-size: 1ch; <abosolut-size> Lorem ipsum
em calculated font-size of the element font-size: 1.5em; <abosolut-size> Lorem ipsum
rem calculated font-size of the root element font-size: 1.5rem; <abosolut-size> Lorem ipsum
ex x-heigth font-size: 1ex; <abosolut-size> Lorem ipsum

Viewport-percentage lengths

Unit Description Style Syntax Preview
vh 1% of the height of the viewport font-size: 1vh; <abosolut-size> Lorem ipsum
vw 1% of the width of the viewport font-size: 1vw; <abosolut-size> Lorem ipsum
vmin smaller of vw and vh font-size: 1vmin; <abosolut-size> Lorem ipsum
vmax larger of vw and vh font-size: 1vmax; <abosolut-size> Lorem ipsum

Absolute length units

Unit Description Style Syntax Preview
px pixel font-size: 20px; <abosolut-size> Lorem ipsum
cm centimeter font-size: 1cm; <abosolut-size> Lorem ipsum
mm millimeter font-size: 10mm; <abosolut-size> Lorem ipsum
in inch font-size: .2in; <abosolut-size> Lorem ipsum

Example

Absolute Units

p {
  font-size: 17px;
}

Relative Units

h1 {
  font-size: 1.3rem;
}

p {
  font-size: 105%;
}
tag value computed value
body 16px  
h1 1.3rem 16.48px
p 105% 16.8px

References