CSS Reference

Here's a short description to many CSS properties, along with some examples, and links to further documentation.

Background

• background-color - sets background color of an element
• background-image - sets one or several background images for an element, e.g. background-image: url(image-address.png);
• background-repeat - defines how background images are repeated
• background-attachment - sets whether image scrolls with content or stays fixed in place
• background-position - sets the position of a background image
• background-size - sets the size of the background image
• background - shorthand for setting above properties (and more)

Border

You can specify one value for all 4 borders:

border-width: 2px;

or use 2 values for horizontal-vertical:

border-width: 2px 10px;

or 4 values for top right bottom left:

border-width: 2px 2em 5px 1em;

When not differentiating between the 4 borders, it's simpler to use the shorthand border property.

You can also specify a specific border side in its own rule, by adding a direction after the word border, such as border-top-width or border-left-color.

• border-width - set the border width, such as 2px or 0.1em
• border-color - set the border color, such as green or #8BC2D9
• border-style - set the border style, such as solid, dotted or dashed
• border - shorthand to set the above 3 properties

CSS 3 properties:

• border-radius - set how rounded the border is
• box-shadow - add a drop shadow to an element

Color

• color - Sets the text color of an HTML element. (See Color value for possible values.)
• opacity - sets how opaque an element is, from 0 (transparent) to 0.5 (translucent) to 1 (fully opaque, the default).

Text

• text-align - control how text is aligned, such as left, right, center or justify
• text-decoration - set a text decoration to underline, overline or line-through. Can also set color and style of line.
• text-indent - set indentation of first line of text
• text-transform - change capitalization of text
• vertical-align - set vertical alignment of a box
• letter-spacing - set spacing between characters
• word-spacing - set spacing between words
• white-space - set how whitespace in the HTML element is handled (or ignored)
• direction - set the direction of the text

CSS 3 properties:

• text-overflow - specify how to signal overflowed text
• text-shadow - add a shadow to text (like box-shadow)