Absolute and Relative

Absolute

Absolute Length

Absolute Length in pixels

p { font-size: 16px; line-height: 2em; } div { font-size: 30px; border: 1px solid black; } span { font-size: 0.5em; }

These paragraphs have a calculated line-height of: 2x16px = 32px.

The font-size of the div element is set to 30px. The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px.

HEX colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.

Red

Blue

Cerise

HEX colors with transparency

A hexadecimal color is specified with: #RRGGBB. To add transparency, add two additional digits between 00 and FF.

Red transparency

Blue transparency

Cerise transparency

RGB colors with & w/o opacity

Red

Green

Blue

Grey

Yellow

Cerise

Predefined Color Names

140 color names are predefined in the HTML and CSS color specification. These are just some of them.

Blue

Red

Coral

Brown

The currentcolor Keyword

The currentcolor keyword refers to the value of the color property of an element.

The border color of the following div element will be blue, because the text color of the div element is blue:

This div element has a blue text color and a blue border.

Background Repeat

By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.