Best Practices in CSS

Use div for blocks no table

Use classes and ids

Use span for inline style changes

Use sprites for small images

Keep your code organized

Use comments

Keep library of css templates so you can use them in your next project

Declare your xhtml pages with DocType of xhtml1

Use W3c validators

Use consistent naming conventions

Best practice to show image button

Usually you create 2 different status of your button. one is normal image and the other one could be when mouse is hover over the image. If you want to show these images the best practice is to have both images merged into one image. You can use css to define which image should be used. in the following example you have an image that has both button image and you are selecting the left bottom one.
this is called image sprite. you merge number of images into one image therefore browser will load one image once and use that one image for different icons. It is very effective for image buttons and icons

#linkDemo a{

Display:block;

Float:left

Background: url(mybuttonsprite.jpg) no-repeat left bottom}

Change ul and li styling

To change ul and li styling use the following. Usually you try to remove styling from ul then try to float li then if you have a tag try to style them and most of the time you have sprites images to show.

Ul {

list-style:none;

Margine:0;

Padding:0;

}

li {

    float: left;

    margin: 0;

    padding: 0;

}

a {

    font-family: Verdana, sans-serif;

    display: block;

    color: #fff;

    text-decoration: none;

    padding: 0 15px 0 30px;

    margin-right: 10px;

    line-height: 25px;

    background: url(../images/mySprites.png) -286px -25px;

    border: none;

}

 a:hover {

    color: #f8b449;

    background-position: -286px 0;

}

 a.current {

    margin-top: -5px;

    height: 30px;

    background-position: -86px 0px ;

    color: #aaa;

    line-height: 25px;

}

 a.current:hover {

    cursor: default;

}

Border nice effects

use the following cool effects for border:

border-radius:10px /*round corner*/
transform:rotate(-5deg)

CSS Color

You can use the following attributes for color:

Color:#eee

Background-color:#eee

Border-color:#eee

CSS Font

Use the following fonts in html:
Georgia, Serif
Verdana,Sans-serif
monospace
cursive

Also you can use the following cool attributes:

text-transform:Capetalized
text-decoration:blink

How to apply 2 different css to one html tag

let's say you already have 2 different css custom class defined in your code and you need to apply both of them to a html tag you can use both of them like this:

<P class="myFirstClass mySecondClass"> </p>