I know it will sound too geeky, but I realized lately the important role of css in designing (good example is this blog).

CSS Cheat Sheet Today, more and more web designers are resorting to using CSS to layout their websites instead of using tables. Why? Because as I’ve read in the hundreds of articles and tutorials about CSS / HTML, tables aren’t even supposed to be used for layouting, since first off your code will come out looking like a mess and secondly, the more code you have, the longer it takes for your site to load. I just want to share with my readers this brief reference for CSS coding.

SYNTAX
Syntax
selector {property: value;}
External Style Sheet
Internal Style
selector {property: value;}
Inline Style

Shorthand*

background

border

border-bottom

border-left

border-right

border-top

font

list-style

margin

padding

Comments

/* Comment */

Pseudo Selectors

:hover

:active

:focus

:link

:visited

:first-line

:first-letter

Media Types

all

braille

embossed

handheld

print

projection

screen

speech

tty

tv

Units

Length %

em

pt

px

Keywords bolder

lighter

larger

GENERAL
Class String preceded by a period
ID String preceded by a hash mark
div Formats structure or block of text
span Inline formatting
color Foreground color
cursor Appearance of the cursor
display
block; inline; list-item; none
overflow How content overflowing its box is handled
visible, hidden, scroll, auto
visibility
visible, hidden
FONT
font-style
Italic, normal
font-variant
normal, small-caps
font-weight
bold, normal, lighter, bolder, integer (100-900)
font-size Size of the font
font-family Specific font(s) to be used

TEXT
letter-spacing Space between letters
line-height Vertical distance between baselines
text-align Horizontal alignment
text-decoration
blink, line-through, none, overline, underline
text-indent First line indentation
text-transform
capitalize, lowercase, uppercase
vertical-align Vertical alignment
word-spacing Spacing between words

BOX MODEL
CSS Box Model height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left;

BORDER
border-width Width of the border
border-style
dashed; dotted; double; groove; inset; outset; ridge; solid; none
border-color Color of the border

POSITION
clear Any floating elements around the element?
both, left, right, none
float Floats to a specified side
left, right, none
left The left position of an element
auto, length values (pt, in, cm, px)
top The top position of an element
auto, length values (pt, in, cm, px)
position
static, relative, absolute
z-index Element above or below overlapping elements?
auto, integer (higher numbers on top)

BACKGROUND
background-color Background color
background-image Background image
background-repeat
repeat, no-repeat, repeat-x, repeat-y
background-attachment Background image scroll with the element?
scroll, fixed
background-position
(x y), top, center, bottom, left, right

LIST
list-style-type Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none
list-style-position Position of the bullet or number in a list
inside; outside
list-style-image Image to be used as the bullet in a list