CSS Toturial
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 [Photo] 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