CSS CHEAT SHEET

Shorthand*
background border border-bottom border-left border-right border-top font list-style margin padding Syntax selector {property: value;} External Style Sheet <link rel="stylesheet" type="text/css" href="style.css" /> Internal Style <style type="text/css"> selector {property: value;} </style> Inline Style <tag style="property: value">

SYNTAX

BOX MODEL
height; w idth; margin-top; marginright; margin-bottom; margin-left; padding-top; padding-right; paddingbottom; padding-left;

Comments
/* Comment */

BORDER
borderw idth borderstyle bordercolor Width of the border
dashed; dotted; double; groove; inset; outset; ridge; solid; none

Pseudo Selectors
:hover :active :focus :link :visited :first-line :first-letter

GENERAL
Class ID div span color cursor display String preceded by a period String preceded by a hash mark Formats structure or block of text Inline formatting Foreground color Appearance of the cursor
block; inline; list-item; none

Color of the border

POSITION
clear float left top position z-index Any floating elements around the element?
both, left, right, none

overflow How content overflow ing its box is handled

Floats to a specified side

left, right, none

Media Types
all braille embossed handheld print projection screen speech tty tv

visible, hidden, scroll, auto

visibility

visible, hidden

The left position of an element

auto, length values (pt, in, cm, px)

FONT
font-style fontvariant fontw eight font-size
Italic, normal normal, small-caps bold, normal, lighter, bolder, integer (100900)

The top position of an element

auto, length values (pt, in, cm, px) static, relative, absolute

Element above or below overlapping elements?

auto, integer (higher numbers on top)

Size of the font background-color background-image background-repeat

BACKGROUND
Background color Background image
repeat, no-repeat, repeat-x, repeat-y

Units
Length % em pt px Keyw ords bolder lighter larger

font-family Specific font(s) to be used

TEXT
letter-spacing Space betw een letters line-height text-align textdecoration text-indent texttransform Vertical distance betw een baselines Horizontal alignment
blink, line-through, none, overline, underline

background-attachment Background image scroll w ith the element?

scroll, fixed

background-position

(x y), top, center, bottom, left, right

First line indentation

capitalize, lowercase, uppercase

LIST
list-styletype list-styleposition list-styleimage Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none

vertical-align Vertical alignment w ord-spacing Spacing betw een w ords

Position of the bullet or number in a list

inside; outside

Image to be used as the bullet in a list

* The properties for each selector are in the order they should appear when using shorthand notation.