I've heard far too many horror stories surrounding peoples first experiences with Cascading Style Sheets (CSS). At first I wondered why. Then, as I started to pay more attention to peoples frustrations, I noticed that 9 times out of 10 they resulted from trying to add some CSS declarations to an already complex and kludge filled page design. While older browsers have good support for the fundamentals of CSS, it is when you mix coding methods (e.g. tables and floats) that you usually end up with a catastrophe.
Forget Everything You Know
Forget your arsenal of table tricks, spacer gifs and font tags. Forget the chopping up a rectangle design model of applications like Image Ready. Forget adding white space by adding empty paragraphs or line breaks. There is a certain influence that our methods of site building has over a site's aesthetic. Reliance on tables for a layout grid have a large impact on the way a design develops. For this reason it is quite difficult to achieve pixel for pixel version of your table based site with CSS, so don't try that either.
To realize any benefits from Style Sheets you to must make the switch from the beginning of the process. Retrofitting existing coding practices will get you nowhere fast.
Relearn HTML
Go read the HTML Spec. Learn about all the tags you never used before. Pay Careful attention to the meaning of each tag. Not every piece of text is a paragraph - look for appropriate alternatives. Pay attention to tags like <Q>, <DL>, <LABEL>. Using these well will help you enormously. Don't skip over your old favorites like <TABLE>. They too have their place.
Learn To Break HTML With CSS
But I never use definition lists because they're ugly. <CODE> doesn't work for what I want to do because its not a block element. I won't use <BLOCKQUOTE> because it indents too much. And I don't want to use that header because it doesn't give me the right size.
These are the types of reasoning we've seen in the past for our choices of how to code a page. Those reasons all go out the window if we are using CSS.
Learning to break these default behaviors is easy. Start simple. Modify the visual behavior of tags by using css box properties like padding and margin, or classification properties like display and white-space. Venture into CSS2 selectors and learn to apply different styles to the same tag depending on how it appears in the document. Learn to change the way adjacent page elements interact with each other.
Design With CSS In Mind
Don't think about having to span columns or use table cell backgrounds. Instead think about dealing with the different types of content on the site in sections. How these sections might interact with each other when using the position and float CSS properties. Use negative values for margins to lock elements together, or just to play with the layout grid. Instead of relying on images distributed between table cells, use the backgrounds of page elements, or of the page itself.
Don't Give In To Time
I've found the biggest factor keeping some from jumping into bed with CSS is that they are comfortable with the way they work now. Using tables are faster because its what they know. Don't give into that feeling. While that may be the case for today, I've found that after a short time of working with CSS its not just faster, but the code is easier to modify, and more interesting to build.
