If HTML is the structural basis of a Web page, CSS determines the appearance of that page. The CSS will tell the HTML where to be and how to look.
The biggest challenge in designing with CSS is browser compatibility. The three main browsers: IE, Firefox and Safari, all render CSS a little bit differently. Even worse, different versions of IE have their unique issues with CSS.
This makes writing clean CSS all the more important. Not only will your code be easier to read and faster to load, but it will help you avoid the various browser obstacles.
The first step to clean CSS is clean HTML. After all, if the foundation of your house is slanted or rotting, no amount of facade work is going to keep it standing.
1. Don't Use Tables for Layout
Using tables for layout can be tricky, and always makes your HTML file bloated and messy. Search engines won't read your content hierarchy correctly if you use tables to create side navigation, and nested tables take longer to load.
Tables are invalid in XHTML 1.0 and HTML 4.0, unless they are used to display data. Invalid code means more time fighting browser bugs. So use tables for tabular data and leave the layout to divs, which you can style later in your CSS.
2. Use a Strict Doctype and Validate
Since we're not using tables for layout, go ahead and use the Strict XHTML 1.0 or HTML 4.0 doctypes.
Strict doctypes don't allow deprecated tags or frames. They encourage you to set all formatting in the CSS.
When you're done writing your HTML, run it through a validator to make sure you didn't make any mistakes.
3. Indented Structure
Your HTML is likely to have a lot of parts: divs, headings, paragraphs, lists. Each of these parts has an opening and closing tag.
Although indenting will not affect how the page loads, it will make the code a lot easier to read.
So: Indent one tab when you start a new element that is a child element of the tag above it. Then move back in a tab when you close that element.
This will allow you to see very clearly what content is being affected by a parent element, and also make sure you have closed all your tags.
4. Inline vs. Block Elements
HTML can be broken up into two types of elements: inline and block.
Block level elements can contain other block elements, inline elements and text.
Examples: <div>, <h1>, <li>, <p>
Inline elements add markup to block elements. Inline elements can only contain other inline elements or plain text.
Examples: <a>, <def>, <img>
Nest your tags properly for correct browser rendering and valid HTML.
5. Miscellaneous
Instead of typing & or @ as you would in a word processor, use a character set and encode your characters.
Keep your CSS and HTML separate. Instead of putting CSS inline or in the head of the HTML, make it an external document.
Use naming conventions for elements that describe the content they contain, rather than the style being applied.
Alright, now you've got a solid foundation. Time to apply the CSS.