10 Often Made CSS Mistakes

I thought I would give a list of the mistakes which I often make. I assume a lot of people make the same ones and it can often cause your whole design to mess up. So go through the checklist if you have a problem with your design and it might be one of the following

  • Forgetting to clear floats. After you float your columns you need a clearing div so that your wrapped container expands vertically
  • Leaving out the margin:0 on heading tags. This can often push things far apart when near your heading tags.
  • Having the width of an element but not taking into account padding. This is one of my classic errors. I set a column width 250px which fits perfect with the other column but then add padding left or right and don’t change the width. This is sorted by taking the padding amount away from the width.
  • Not giving a visited attribute for links. All looks good at first then suddenly your links turn to the default blue colour. Remember to put visited attributes on your links.
  • Not closing a div. Yep it happens to the best of us. It can throw the whole template out of sync and cause huge problems.
  • Not including “#” on your colour attributes. Its easy to do but can have you looking for the problem for a while. Will cause the colour not to show up in some browsers.
  • Typing id differently in CSS file and HTML file.. This is the most frustrating one as after you have worked it out you will be kicking yourself.
  • Spelling an attribute incorrectly. Yet another simple mistake to make. This could be as simple as typing backgrond by accident. This will cause the attribute to be ignored.
  • Leaving out the ending semi colon. I usually only do this if I edit something and remove a line and accidentally take the semi colon away. This will cause a number of attributes to be ignored.
  • Forgetting outline attributes on input fields and buttons. I made this mistake a lot when I first started to code. It will cause a border often unwanted around submit buttons.

Article written by Michael Clarke – Free CSS Templates.

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.


Related CSS Tutorials

  • 13 Awesome CSS and jQuery Navigations for Free

    February 13, 2010 / 17 Comments

    Today I have been experimenting with adding jQuery effects to navigations and links to create some pretty nice interfaces. I have written a brief description for each and include a download.

  • Top 10 Tips for Selling Templates On Themeforest

    May 9, 2009 / 5 Comments

    To kick off the celebration of themeforest today im going to give my advice/tips on getting your templates onto themeforest and making the most sales possible.

  • Top 7 link and text effects using javascript/css

    April 20, 2009 / 17 Comments

    In this article I will run through my favourite ways of enhancing links and text on your website using Javascript and CSS.


Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books