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:
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.
Other posts
- My Recommendations for a Happy Life
- Budget 100 - an old school magic format
- My Favorite Board Games and How I Play Them
- Switching from Windows PC to Mac and why I switched back
- Creating The Space War - The Card Game of My Dreams
- 24 Characteristics That Geniuses Have in Common
- Setting up and Managing a MySQL Server
- Canasta - The Great Card Game
- Annual report number 13 + 14: My Success
- Selling my SEO business TodaysWeb
He is the Founder of DomainStats and N.nu. Read his full about page.