When starting coding a Photoshop layout or whenever you work for something,  you should always be aware of some CSS tips that will make your life easier.

1. Place CSS in a separate file

When you’re working with CSS code you should always use an external file to load CSS from. It’s very important to have your project files well organized and this helps you doing that.

2. Reset CSS

You need to reset CSS because as you’ve seen, browsers assign different styles to some elements and the best approach is to clear(reset) all styles from the beginning. In this way you’ll be sure you made a good start.

The best method I know since I work in this area is the Eric Mayer’s Css Reset method .

For those of you who think his method is too complex I suggest you to create your own reset method. You can start by resetting the elements you think you’ll use most like in this example:

body, div, h1,h2, h3, h4, h5, h6, p,ul
{
  margin: 0;
  padding: 0;
}

3. Always style inputs

There is no reason why you must use the predefined styles for the inputs, so always try to customize the inputs. If you don’t do that you will experience different looks for different browsers.

4. Use CSS comments

This is a good way to organize your code and you should do that especially when you have more than let’s say 100 css lines.

p
{
  margin: 10px 0;
}

/*This is a css comment*/

div
{
  height: 20px;
}

5. Center horizontally

Here you can see how to center horizontally an inline element:

  text-align: center;

To center horizontally a block element you must set the width for it and also auto for the left and right margins:

  width: 200px;
  margin: 0 auto;

6. Use inline and block elements correctly

This mean it’s recommended for you as a designer/developer to use the block elements like “div” when you need a block element and not use a “span” element for example with “display: block” style. This is available also for the inline elements like “b” or “i”, they must be used as inline elements when possible.

7. CSS text-transform property

Avoid writing with capitalized letters and use instead the text-transform property to do that:

  text-transform: uppercase;

8. Background sprites

Using sprites avoids causing flickering when using hover effects, try using all the time this technique because it’s awesome.
Two excellent articles about CSS background sprites I’ll recommend are alistapart.com article and the smashingmagazine.com one.

9. Font properties in one declaration

Instead having these three font properties for example:

  font-family: Arial;
  font-size: 12px;
  font-weight: bold;

use this css rule:

  font: bold 12px Arial;

10. Validate, validate and validate again!

You must always validate your css code to be sure that your code is W3c valid. A valid code means a good developer.

What other CSS  tips you are using  that are mandatory in your design/development?