When I got into web design, table-based design was already anathema. So for me, CSS was the most natural thing–it was the ONLY thing I knew. CSS made sense to me, and I really liked how I could granularly control the behavior of everything that I slapped on a web page.

One downside to this, however, is that I went a bit overboard. To get this control, I went with what I thought was the best route–uniquely class EVERYTHING. This, of course, led to bloated stylesheets and difficult to maintain code.

My problem? I failed to take advantage of default element CSS behavior. What do I mean? Well, consider the <h1> tag. By default, this tag is a block level element which means it will take its own "line" and force content which follows it to appear below. The same is true with the <p> tag. So what's the point? Well, let's say we use good semantics and have our page title be wrapped in <h1> tags. If we simply use the default behavior, the title of the page will be separated from any content that follows it–that makes sense, so why not use it?

And <p> tags? As most are aware, a good percentage of WYSIWYG editors automatically wrap chunks of text in <p> tags (wherever there is a line break). So if you leave this alone and don't strip those out at render, an automatic amount of space will be placed between "paragraphs" in the body text. No need for <br /> tags or clearing divs.

So what am I getting at? Just this: Generic, vanilla HTML tags come built in with default styles that can be used to your advantage. Instead of creating brand new classes for spans (or something else) to get at the same functionality (like block level display, bold font-face, etc.), the default renderings can be built upon which will ultimately equate to less code to manage and more semantic markup.

A word of warning must be said, however. While some default styles are universally understood by all browsers, some browsers DO render certain elements differently by default (usually differences in default margins and padding). So then, to get cross-browser default styles, I use a reset.css that takes care of the inconsistencies (margins, padding, etc.) and leaves the default styles that are recognized universally.

To wrap this up, I'll say it again: using default styles to your advantage is a great practice because it helps to keep your design semantic (headings are headings, paragraphs are paragraphs, etc.) and helps prevent CSS line-number creep.

More in this series:

On Becoming a Better Web Designer, in 4-D!

On Becoming a Better Web Designer, Part Third

On Becoming a Better Web Designer, Part Deux

On Becoming a Better Web Designer [First Part]