You are on page 1of 1

CSS Shorthand Cheat Sheet by Example leigeber.

com
Margin & Padding
#div { #div { #div { #div {
margin-top: 0; margin-top: 10px; margin-top: 0; margin-top: 50px;
margin-right: 5px; margin-right: 20px; margin-right: auto; margin-right: 50px;
margin-bottom: 10px; margin-bottom: 0; margin-bottom: 0; margin-bottom: 50px;
margin-left: 15px; margin-left: 20px; margin-left: auto; margin-left: 50px;
(auto, 0, px, pt, em or %) } } }
}
#div { #div { #div {
#div { margin:10px 20px 0; margin:0 auto; margin:50px;
margin:0 5px 10px 15px; (top right/left bottom) (top/bottom left/right) (top/right/bottom/left)
(top right bottom left) } } }
}

Border
#div { #div { #div {
border-width: 5px; border-right-width: 2px; border-top-width: 3px;
(thin, thick, medium or set value) (default = medium) border-right-style: solid; border-right-width: 2px;
border-style: dotted; border-right-color: border-bottom-width: 3px;
(solid, dashed, dotted, double, etc) (default = none) #666666; border-left-width: 2px;
border-color: blue; } }
(named, hex, rgb or 0-255) (default = value of elements/
elements parent color property) #div { #div {
} border-right:2px solid #666; border-width:3px 2px;
} }
#div {
border:5px dotted blue;
}

Background Font
#div { #div {
background-color: #CCCCCC; font-family: Verdana, Arial, Helvetica;
(named, hex, rgb or 0-255) (default = transparent) (Verdana, Arial, “Times New Roman”, etc) (default = browse based)
background-image: url(images/bg.gif); font-size: 12px;
(url or none) (default = none) (xx-small, medium, x-large, set value, etc) (default = medium)
background-repeat: no-repeat; font-weight: bold;
(repeat, repeat-x, repeat-y or no-repeat) (default = (normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)
repeat) font-style: italic;
background-attachment: scroll; (normal, italic or oblique) (default = normal)
(fixed or scroll) (default = scroll) font-variant: normal;
background-position: top left; (normal or small-caps) (default = normal)
(top, right, left, bottom or center) (default = 0% 0%) line-height: 1.5;
} (normal, px, pt, em, num or %) (default = normal)
}
#div {
background:#CCC url(images/bg.gif) no-repeat 0 0; #div {
} font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
}

List Color
#div { Aqua: #00ffff to #0ff
list-style-image: url(images/bullet.gif); Black: #000000 to #000
(url or none) (default = none) Blue: #0000ff to #00f
list-style-position: inside; Dark Grey: #666666 to #666
(inside or outside) (default = outside) Fuchsia:#ff00ff to #f0f
list-style-type: square; Light Grey: #cccccc to #ccc
(circle, disc, square, etc) (default = disc) Lime: #00ff00 to#0f0
} Orange: #ff6600 to #f60
Red: #ff0000 to #f00
#div { White: #ffffff to #fff
list-style:square inside url(images/bullet.gif); Yellow: #ffff00 to #ff0
}

You might also like