Common CSS mistakes and their solutions

While adding new templates to my website system N.nu (see all templates here) I always have to correct mistakes in the CSS. I normally add templates from Wordpress.org or popular CSS templates sites so I assume that the creators are experienced professionals. This article is based on the experience after correcting over 100 popular CSS templates.

People that are helping to make new or convert templates to N.nu are required to first read and understand this article.

Mistake: Resetting all CSS and failure to style back everything

This is a common one:

* {margin:0;padding:0;}

Also using a CSS reset such as Eric Meyers set of rules or a variation of it is also common practice.

The mistake is to not style back all the headings, lists, form elements, blockquote and so forth.

Mistake: Failure to set good margins on headings

For good readability the space above a heading (h2-h6) needs to be larger then the space under it. h2, h3 and h4 needs to be styled as they are regularly used inside the content area to make subheadings. Even the standard WordPress theme twentyten fails on this aspect.

This is a h3 heading.

Here comes some text.

This is a h4 heading.

Here comes some text.

Mistake: Failure to style the image element

Perhaps easily forgotten. Something like this works well for me:

#content img {background:#fff;padding:2px;border:2px solid #ccc;margin:10px;}

Example:

Me on a train in Bolivia

Mistake: Failure to style text properly

The text is often the most important thing on a website. So make it easy to read plaese.

Line height

Don't forget to set the line height. It is easy forgotten.

Line length

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces. - "Typographie", E. Ruder Source

Align: Justify

Please do not use text-align: justify; on places with a small line length such as a sidebar as it is causing irregular spaces between words. It looks very bad.

Mistake: Failure to style the blockquote element

My suggestion is to add some margins, use a different background color and italic font. As a minimum. Bonus if you have a nice background image.

For example:

#content blockquote {background:#f5f5f5;padding:1px 15px;font-style:italic;}

This is some text inside a blockquote element.

Mistake: Failure to properly style lists

To improve readability a margin has to be provided under each list item. This makes it easier to differentiate the list items even though the text in a list item has line breaks.

#content li {margin-bottom:7px;}

Mistake: Adding a border on all links with no solution for linked images

This is becoming a common practice:

a:link, a:visited {border-bottom: 1px solid red;text-decoration: underline;}

The problem is that now an ugly border is added to all linked images. The solution? Well it is not so simple. But check this article.

For example:

a[href$=jpg], a[href$=jpeg], a[href$=png], a[href$=gif] {text-decoration: none;border: 0 none;}

Mistake: Liquid layout without a max-width

A liquid layout can be a great thing. But without a max-width the readability will suffer on large screens or big resolutions because the line length of the body text will be too long.

Solution

#content {
  /* max-width hack for IE since it doesn't understand the valid css property */
  width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%");  
  max-width: 1000px;
}

Credit: Fullahead

Mistake: Failure to properly style links

Links that are visited and links that are hovered needs to have a different color/background/border than links that are not visited yet. That's basic usability.

Mistake: Failure to properly set margins on the main content div

I have seen those templates that rely on the p elements for left and right margins in the content area. The problem is then when a user inserts an image, table, form or other element without a p element then there is no margin and it looks ugly. So set the margins on the #content id or whatever you are using instead of the p element.

Mistake: Forcing lowercase in headers

I mean come on. I don't understand this new trend of text-transform: lowercase;. If a user wants lowercase then he will write it in lowercase - no need to force it. Please remove those when converting templates to N.nu.

Mistake: Failure to properly style form elements

Nowadays I add the following for my contact forms (or a variation of it):

fieldset#contact-form {margin:20px 0px 20px 10px;padding:10px;color:#000;width:380px;background:#eee;border:2px solid #aaa;}
fieldset#contact-form label {font-size:13px;}
fieldset#contact-form input {height:20px;font-size:15px;margin-bottom:15px;padding:3px;}
fieldset#contact-form textarea {font-size:15px;margin-bottom:15px;width:360px;padding:3px;}
fieldset#contact-form #contact-button {font-size:14px;height:30px;margin-left:30px;}

You can also add some focus effect:

input:focus, textarea:focus {background:#fff;border:1px solid #555;}

Change the colors if it is a template with a dark background.

Summary

I'm not a CSS expert but I can see basic errors and mistakes. This article covers the most common ones that I have seen.