CSS Reference Sheet

Colors & Backgrounds

color
This property sets the forground color to use for an element's text content.

background
The background property is a short-hand property for setting individual background properties.

background-color
This property sets the background color to the element it's applied to.

background-image
The background-image property sets a background image to an element.

background-repeat
This property is used in conjunction with background-image to specify the images repeat pattern and how.

background-attachment
This is another property that is used in conjunction with the background-image property.

background-position
If a background image has been specified, this property sets the background image's position.

Box Model Properties

margin
This property is a shorthand property for setting all parts of a margin in the same place of your style sheet.

margin-top
This property sets the top margin of the containing block applied to.

margin-right
This property sets the right margin of the containing block applied to.

margin-bottom
This property sets the bottom margin of the containing block applied to.

margin-left
This property sets the left margin of the containing block applied to.

padding
This property is a shorthand property for setting all parts of padding in the same place of your style sheet.

padding-top
This property sets the top padding of the containing block it's applied to.

padding-right
This property sets the right padding of the containing block it's applied to.

padding-bottom
This property sets the bottom padding of the containing block it's applied to.

padding-left
This property sets the left padding of the containing block it's applied to.

border
This is a shorthand property for setting the same width, color and style to all four borders of a box.

border-width
This is a shorthand property for setting the top, right, bottom and left width of a border.

border-top-width
This property sets the width of the top border of it's containing element.

border-right-width
This property sets the width of the right border of it's containing element.

border-bottom-width
This property sets the width of the bottom border of it's containing element.

border-left-width
This property sets the width of the left border of it's containing element.

border-color
This is a shorthand property for setting the top, right, bottom and left color of a border.

border-top-color
This property sets the color of the top border of it's containing element.

border-right-color
This property sets the color of the right border of it's containing element.

border-bottom-color
This property sets the color of the bottom border of it's containing element.

border-left-color
This property sets the color of the left border of it's containing element.

border-style
This is a shorthand property for setting the top, right, bottom and left style of a border.

border-top-style
This property sets the style of the top border of it's containing element.

border-right-style
This property sets the style of the right border of it's containing element.

border-bottom-style
This property sets the style of the bottom border of it's containing element.

border-left-style
This property sets the style of the left border of it's containing element.

Fonts & Text

font
This property is a shorthand property for setting font-style.

font-style
This property selects between normal, italic and oblique faces within a font family.

font-variant
This will select the type of variation to use on a font family.

font-weight
The font-weight property sets the weight of a font family.

font-size
The font-size property sets the the size of the font.

font-family
This property sets a font family or group of font families applied to its containing element.

text-indent
This property sets an indentation on the first line of text in a block.

text-align
This property describes how inline content of a block is aligned.

text-decoration
This property describes decorations that are added to the text of an element using the element's color.

letter-spacing
This property specifies the amount of spacing between text characters.

word-spacing
This property specifies the amount of spacing between words.

text-transform
The text-transform property controls capitalization effects on an element's text.

white-space
This property declares how whitespace inside the element it's applied to will be handled.

Visual Formatting

display
The display property is the major component of visual formatting and defines the formatting on an element.

position
The position property is used to determine which of the CSS 2.1 positioning algorithms is used to calculate the position of the box.

top
This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box.

right
This property has the same effect as the top property mentioned above but will effect the offset of the right edge.

bottom
This property has the same effect as the top property mentioned above but will effect the offset of the bottom edge.

left
This property has the same effect as the top property mentioned above but will effect the offset of the left edge.

float
This property specifies whether a box should float to the left, right, or not at all.

clear
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

z-index
For a positioned element.

direction
This property sets the writing direction of blocks and the direction of embeddings.

overflow
This property specifies whether content of a block-level element is clipped when it overflows the element's box.

clip
The 'clip' property applies only to absolutely positioned elements.

visibility
This propery specifies where the boxes generated by an element are rendered.

Tables & Lists

table-layout
The 'table-layout' property controls the algorithm used to lay out the table cells, rows, and columns.

border-collapse
This property selects a table's border model.

border-spacing
This property specifies the distance that separates adjoining cell borders.

empty-cells
This property controls the characteristics of an empty table cell.

list-style
The list-style property is a shorthand notation for setting the three properties

list-style-type
This property specifies how the marker of a list item will be displayed.

list-style-image
This property sets the image that will be used as the list item marker.

list-style-position
The list-style-position property specifies the position of the marker box in the principal block box.

User Interface

cursor
This property specifies the type of cursor to be displayed for the pointing device. This property is especially usef...