Write Better CSS

Write Better CSS

1. Single-line vs. Multi-line
multiple lines, like this:
.title {
font-size:14px;
line-height:20px;
color:blue;
}
Or on one or single line, like this:
.title {font-size:14px;line-height:20px;color:blue;}

2. Section Your File
comment above each section is all you need:
/*** Header ***/

3. Start With a Reset
* {margin:0;padding:0;}

4. Use Shorthand CSS
Shorthand CSS is combining a few related rules into one.
Example
.example {
background-color: blue;
background-image: url(images/blue-bg.jpg);
background-position: 100% 0;
background-repeat: no-repeat;
}
Shorthand
.example {background: blue url(images/blue-bg.jpg) 100% 0 no-repeat;}

5. Multiple Classes on One Element
The reason to do this is that you can define generic CSS styles that can be applied to a number of elements.
<p class="info left">Some example text in your info paragraph.</p>

6. Positioning Header Elements
#header {position:relative;width:960px;height:120px;}