4 Steps Towards Great CSS/HTML Layouts

This is basically a guide on how I like to create sites, from start to finish. Hopefully its beneficial to someone out there. Feel free to argue, comment, add information, flame, etc.

Step 1: Create basic site structure/skeleton
Decide how many columns and/or rows your site will need. Only set values that are needed to support the basic structure (EX. Column widths). Do not set backgrounds or any other styling. Try to keep in mind how the site will flow. If there are only navigational items in the left column, for example, you won't need to create a left column div, you can just used the list itself. You have to constantly visualize how your HTML markup will look. Keep all CSS internal so you can mess with it easily.

Why?
Typically people like to start with the basic HTML first, but I have come to realize some sites can get quite complicated, structure-wise. It gets pretty confusing trying to break HTML markup into columns and rows, and it often feels like I'm trying to work backwards. It only makes sense that you start off with a skeleton before you try to sculpt a work of art.

Step 2: Fill in HTML markup
Start filling in the columns with very basic HTML. Make good use of all existing tags, because anything can be styled. Try to notice any elements that are the same or very similar, so you can recycle classes in step 3. For any section with multiple non-sequencial bits of information (typically navigation), use an unordered list. For sections with a parent and children (EX. Clothing -> shirts, pants, shoes), use a definition list. Keep in mind that strong, anchor, and other commonly used tags can also be styled. There should be very few reasons to nest HTML styles inside each other. Span tags are generally used when no other tag would be semantic in the situation.
Type out ALL text you see in the design (including logos and other images). Logos should always have a text alternative anyhow, so you are just making Step 3 easier. Only use an tag if the image adds something to the document. Presentational images should all be made backgrounds in Step 3.
You should constantly disable CSS to see if the document flow is correct, and enable it again to ensure your structure is solid. The flow of a document should normally looks something like: Page title (company logo text alternative), header information (slogan, etc.), main navigation, sub navigation, content, alternate navigation, copyright etc.

Why?
It is the next logical step. You will take twice as long making a page if you try to style it along the way, and it's code will probably have half the quality too. Styling a page usually puts you in a different mindset, and doesn't work well with trying to create semantic, clean code. On top of that, many styles effect each other (cascading style sheets...), and its extremely annoying trying to create html, style the html, and fix the styles on your html all at the same time.

Step 3: Finally it's time to style
Now that your page has a structure and flows perfectly, it's time to actually make it look like the design. Keep your styles clean and minimalistic. Since you should have used the appropriate HTML tags in Step 2, the majority of
the text formatting should already be done. Make good use of the single declaration styles, such as "margin: 0 3px 7px 2px;", as they will cut down quite a bit on your CSS file size.
Try to avoid class and ID names that reflect position. 'header' implies that the class or ID would come first in the document. What if you were told to move it to the end? 'header' would then become pretty confusing. As an alternative use 'branding', or some other word to describe its function. Instead of 'left-nav' and 'bottom-nav', use 'main-nav' and 'alt-nav'.
Formatting CSS is also key; it will significantly help you in the long run by making things easier to find and adjust. Unfortunatly, it seems like everyone has their own way of formatting. A rule of thumb I usually go by is the larger the site, the more I use horizontally formatted elements. If a site is pretty large, I will use almost all horizontal formatting. This not only helps with the vertical size of the file, but allows you to see the cascade better, making it even easier to find what you need.
I normally try to start off each page style the same. In most situations, it's a good idea to use " * { margin: 0; padding: 0; border: none; } " to remove borders, padding and margins from all elements in the document. It is much easier to add these back on, rather than to remove them from everything they don't need to be on. Next, define all of your general tags, such as h1, h2, p, ul, a, a:hover, etc. Then I try to make use of very simple classes. ".left { float: left; }", ".center { text-align: center; }" and ".right { float: right; }". These will help with moving images and paragraphs.
Also remember that hacks are usually a lost resort! The best webpages are the ones that don't use any hacks and still work correctly.

Why?
People like aesthetically pleasing sites. Those who cannot enjoy an aesthetically pleasing site want a logical, well organized site. Those that can't see the logical well organized site, need a simplistic site that a screen reader can make sense out of. The programmer must provide the best of all worlds.

Step 4: Testing, debugging, hair-pulling
Look at the page on every browser you have access to, and make it look exactly the same in all of them. Test the site with CSS disabled, javascript disabled, images disabled... basically disable anything you can think of. Test the site with larger and smaller font sizes and make sure nothing blows up.

Why?
You just made a perfect site. You are really impressed with yourself, and your skills in CSS. Then complaints start coming in about how things don't look right on the site. You then realize that about 90% of the people visiting the site only see garbage on the screen.
The more time you spend testing the site and making it accessible, the larger your audience becomes.

Good Resources
Forums, like CSS Creator
Many layout examples: http://www.maxdesign.com.au/presentation/page_layouts/
Faux column layout: http://alistapart.com/articles/fauxcolumns/
.PNG alpha transparency hack: http://www.themaninblue.com/writing/perspective/2004/06/18/