08/04/2015 CSS Cheat Sheet

CSS CHEAT SHEET
Shorthand* SYNTAX BOX MODEL
background Syntax height; width; margin­top;
border selector {property: value;} margin­right; margin­
border­bottom bottom; margin­left;
border­left External Style Sheet padding­top; padding­right;
border­right <link rel="stylesheet" type="text/css" padding­bottom; padding­
border­top href="style.css" /> left;
font Internal Style
list­style
margin <style type="text/css">
padding  selector {property: value;}
</style>
Comments Inline Style
/* Comment */  <tag style="property: value"> BORDER
border­ Width of the border
Pseudo GENERAL width
Selectors Class String preceded by a period border­ dashed; dotted; double; groove; inset; outset;
:hover style ridge; solid; none
ID String preceded by a hash mark
:active border­ Color of the border
:focus div Formats structure or block of text
color
:link span Inline formatting
:visited color Foreground color
:first­line POSITION
:first­letter  cursor Appearance of the cursor clear Any floating elements around the element?
display block; inline; list­item; none both, left, right, none
Media overflow How content overflowing its box is float Floats to a specified side
Types handled left, right, none
all visible, hidden, scroll, auto
braille left The left position of an element
embossed visibility visible, hidden auto, length values (pt, in, cm, px)
handheld top The top position of an element
print FONT auto, length values (pt, in, cm, px)
projection
screen font­style Italic, normal position static, relative, absolute
speech font­
tty normal, small­caps z­index Element above or below overlapping elements?
variant
tv auto, integer (higher numbers on top)
font­ bold, normal, lighter, bolder, integer
weight (100­900)
Units BACKGROUND
Length % font­size Size of the font
background­color Background color
em font­ Specific font(s) to be used
pt background­image Background image
family
px background­repeat repeat, no­repeat, repeat­x, repeat­y
Keywords TEXT
bolder background­ Background image scroll with the
lighter letter­ Space between letters attachment element?
larger spacing scroll, fixed
line­height Vertical distance between background­ (x y), top, center, bottom, left, right
baselines position
text­align Horizontal alignment
text­ blink, line­through, none, overline, LIST
decoration underline list­style­ Type of bullet or numbering in the list
text­indent First line indentation type disc; circle; square; decimal; lower­roman; upper­
roman; lower­alpha; upper­alpha; none
text­ capitalize, lowercase, uppercase
transform list­style­ Position of the bullet or number in a list
vertical­ Vertical alignment position inside; outside
align list­style­ Image to be used as the bullet in a list
word­ Spacing between words image
spacing
* The properties for each selector are in the order they should appear when using shorthand notation.

http://lesliefranke.com/files/reference/csscheatsheet.html 1/1