10 CSS tips and tricks you should always use

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 working with CSS code, you should use an external files to load CSS from. It’s very important to have your project files well organized and this helps you do 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 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:

  div {
    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:

  div {
    width: 200px;
    margin: 0 auto;
  }

6. Use inline and block elements correctly

This means 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:

  h1 {
  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 four lines declaration block:

  p {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
  }

you can use this single line declaration:

  p {
    font: bold 12px/20px 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.