Common CSS mistakes and their solutions
Note: Take a look at my project, I offer you a professional website for free with N.nu.
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:
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.
Jim Westergren is a web entrepreneur from Sweden who lives together with his wife and son. Some of his interests are programming, web development, SEO, writing and
You are really great ! n.nu is awesome
Thanks for creating such a good web building site 
Thank you
Thanks for a good web building site
Great…..Really helpful and beneficial for a new one in industry like me.
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.
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.
Nice stuff. I try to absorb as much web design knowledge as possible and I’ve found some good stuff on your blog. Thanks.
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!
really thanks mate useful tutorial!
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.