Jim Westergren
A blog about me, my projects, SEO, Web Development and Personal Development.
"If we did all the things we are capable of, we would literally astound ourselves." - Thomas A. Edison

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.

Text size

A person should not have to bend forward in order to read the text. Rather little too big than too small in my opinion. I can’t understand why I still see new CSS templates with font-size:11px for the body text out there – way too small.

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.

Boomark This! Subscribe to the RSS feed
About the Author Jim Westergren Jim Westergren is a web entrepreneur from Sweden now living in Bolivia. He is happily married and has two lovely children. Some of his interests are web development, SEO and writing. He is the Founder and CTO of TodaysWeb and his current major project is N.nu. Read his . Follow Jim on Twitter or Google+.
  • Pingback: How to use a WordPress theme or CSS template for your N.nu website

  • Pingback: xhtml css templates – Common CSS mistakes and their solutions | XHTML CSS - Style sheet and html programming tutorial and guides

  • ankit

    You are really great ! n.nu is awesome :) Thanks for creating such a good web building site :)

  • http://www.jimwestergren.com/about-me-jim-westergren/ Jim Westergren

    Thank you :)

  • Pingback: CSS design för text – Förbättra läsupplevelsen

  • http://obiava-bg.com andrea

    Thanks for a good web building site :)

  • http://www.muhammadnawaz.bravehost.com/ pucit

    Great…..Really helpful and beneficial for a new one in industry like me.

  • http://www.achievesuccess.co.uk Simon

    Great post thanks, bookmarked and will definitely use the next time I am using WordPress to create a website as the css code has a mind of its own thanks.

  • http://www.surgeforward.com Web Developer

    I did realize there were so many error in the CSS. It is great that you have pointed them out and given solutions for them. Thanks for the post.

  • http://thewebsitecreator.wordpress.com Raymond

    Nice stuff. I try to absorb as much web design knowledge as possible and I’ve found some good stuff on your blog. Thanks.

  • http://www.frescocreative.com Fresco Creative SEO

    This is good reading and full of info for me to put into practice with the new website being designed and developed in house. This is info which is good reading for all concerned!

  • http://www.marswarez.com Filesonic Downloads

    really thanks mate useful tutorial!

  • http://www.htysite.com Restsindo-hty

    Thank you for posting about CSS. We use macros dreamwever media to build our website. In these programs available, but we do not use CSS. After reading your article we would like to try it.

  • http://www.mogawk.com mogawk

    great breakdown of common CSS mistakes. I’ve seen with some clients things that really make me scratch my head.

  • http://www.designforce.us Hafeez Ansari

    Great article pointing to right misktaes which are commonly happened with html/css coders. By keeping in mind these tips, surely we can eliminate most of layout related problems.

    Thanks for sharing.

  • http://jelajahiptek.blogspot.com/ Jelajah IPTEK

    Many knowledge and information I got from your site, and I get new insights, such as your article that I read today, if there is a good time please visit my site called Roaming science and technology. Thanks and best regards from Indonesia friendship.

Previous post in category:

Next post in category:

Design, text and custom cache solution by myself.

Page generated in
0.00336 sec