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:
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.
5. Center horizontally
Here you can see how to center horizontally an inline element:
To center horizontally a block element you must set the width for it and also auto for the left and right margins:
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:
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:
you can use this single line declaration:
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?
How to create 3D typography effect using Extrude&Bevel
Get rid of Safari's blue input outer glow once and for all