Handy CSS Manual

A small manual for commonly used CSS properties

APPLYING PROPERTIES IN DIFFERENT BROWSERS:
-moz-border-radius: 10px; ( Curve Borders in Firefox)
-webkit-border-radius: 10px; (Curve Borders in Chrome/Safari)



MARGIN AND PADDING:
padding
padding-top
padding-bottom
padding-right
padding-left
margin
margin-top
margin-bottom
margin-right
margin-left


TEXT:
Change font: font-family
Change font size: font-size
Make text bold: font-weight
Make text italic: font-style
Small Caps: font-variant
upper/lowercase or make all first letter caps: text-transform
Underline/Overline/Line through text/Blink Text: text-decoration

IMAGES:
Using images as border:         border-image
Wrap text around image:         float
using image as background:         background-image
not to repeat the background image: background-repeat
repeat image horizontally/vertically: background-repeat
fixing background image:         background-attachment
make a scrolling background image: background-attachment

COLORS:
change color:                                           color
change background color:                       background-color
change border color:                               border-color
setting color values:                                [by name], [#hexcode], [rgb(x,y,z)]
                                                                {x,y,z are in range 0-255} {x,y,z can also be percentages}
transparent colors:                                   rgba(x,y,z, transparency level)

BORDERS:
add border:         border (width), (type), (color)
change border width: border-width
change border type/style: border-style
change border color: border-color
changing width of portions: border-top-width
                border-bottom-width
                border-right-width
                border-left-width
changing color of portions: border-top-color
                border-bottom-color
                border-right-color
                border-left-color
curve the corners:         border-radius
create drop shadow: box-shadow (right), (bottom), (blur radius), color
transformations:
1. Rotation        transform:rotate(degrees)
2. Slant                transform: skew(xdegrees, ydegrees)

CSS PSEUDO-CLASSES:
:link : properties of link
:hover : when mouse is over the element
:visited    : when a link has been visited
:active : when an object is active


LISTS:
getting rid of bullets: list-style: none;
to show a list horizontally: display:block;



CLEARING FLOATING ELEMENTS:
clear: both ( no floating elements allowed on both sides of an element )