Seven Common CSS Mistakes and How to Avoid Them

• By Ivan Pepelnjak
• Jul 20, 2007

Like this article? We recommend
Sams Teach Yourself CSS in 24 Hours, 2nd Edition

I can easily claim I was one of the early adopters of the Web technologies (well, HTML in those days)—we were developing CGI-based network management applications before Marc Andreessen finished the first public release of the Netscape browser. Formatting was easy in those days—there was none (and if you wanted to achieve special effects, such as using a font you liked, you had to do it with images). When the browser wars started, I gave up and focused on core IP networking, only to find a drastically changed landscape when I returned to Web development a few years ago.

As the timing was short (as always), I had to jump head-on into the new technologies that were developed while I was absent and since I knew a bit about HTML from my early days (actually, apart from a plethora of new tags and attributes, it hasn’t changed that much), CSS was the first new technology I had to master.

Doing Before Learning

In retrospect, it would have been much better if I postponed my tasks at hand for a few weeks, got a copy of a good CSS-related book, and spent some time studying it. But as we all do, I relied on my friend Google to find answers to the specific immediate issues I had... and the application started to grow in unpredictable directions. Unfortunately, it got out of hand before I mastered the nuances of CSS and I still have to live with it because it supports a lot of content I’m publishing (and I never found time to completely redesign it).

In this article, I’ve collected the most common mistakes I’ve been making (and I’ve seen a lot of other developers doing the same), illustrating them on a simple tabular printout.

The next sections are focused exclusively on ways you can improve the efficiency of your CSS formatting and reduce the size of your HTML markup. I will not go into oft-discussed topics (such as "why I should use floating layouts instead of tables" or "how to make a flexible two-column layout") because there are many good books and articles covering those topics.