Blog Post: Common CSS Mistakes

Red Deer & Blackfalds Web Design Writes:

First and foremost, some of the items addressed in this article may seem redundant to Web Developers; however, it’s important to keep in mind as professionals we are usually more susceptible to making minor mistakes than big ones! These minor mistakes can come from a lack of sleep, a strict deadline, or just overall laziness when writing a Website, but not to worry! If you find some of your CSS just isn’t firing, be sure to debug it using some of the simple tricks below that we all battle with on a daily basis:

  1. Firebug It – the majority of web developers and designers are quite good at utilizing the tool Firebug to help point out issues in our code, but sometimes we can fall victim to assuming our CSS is firing when really it’s never actually processed by the server and therefore will not show up in a browser. So take the time to pinpoint the element you’re working on and see if the CSS is even propagating.
  2. Spelling Mistakes – unlike real life, writing code doesn’t offer a lot in the realm of minor mistakes. If even one word is used improperly a CSS rule will not fire and we will not see the changes on the website. Firebug will do a good job of telling you if there is a mistake, but you can also do your own background check on your stylesheets to steer clear of spelling errors.
  3. Note Tags – when using CSS we are able to leave ourselves notes pertaining to certain blocks of code so we can easily discriminate it in the future. A common mistake is to not properly input a “*/” at the end of your note which in turn will leave all the CSS below it as part of your note and will therefore not work.
  4. !important Tags – perhaps when writing your CSS rule, and in the mayhem of real life, you find yourself writing a second rule for the same element. In which case if you applied an !important tag to the original rule your new one will not work. Firebug can also be used to identify this mistake and with proper notes and documentation inside your CSS you can eliminate this issue.
  5. Lack Of Identification – when writing CSS for very specific elements we sometimes don’t always utilize a full string of Classes and ID’s that can ultimately help us specify an element, thereby leaving a predetermined rule to override even when our code is perfect. If your new rule is not firing, take a look at the source code and be very specific and add a longer string before your rule, this can help to ensure that the browser will recognize this as the dominant rule and have your website show up properly! After all, this is the basis of a Cascading Style Sheet.
  6. Caching Issues – plain and simple, if all your code is perfect and it’s just not working … CLEAR YOUR CACHE! Browsers are designed in such a way that they will capture information and try to store it to increase load time on a website. But this can capture old CSS rules and therefore you will not see your new ones. If all else fails, clear your cache, and your rules should apply.

At the end of the day we all make mistakes. And especially in Web Design and Development we can find ourselves in a position where we agonize over a bit of code that we should ultimately just walk away from for a little while. These all seem tedious and irrelevant as solutions to your CSS problems, but I promise you that if you are having problems making your new code fire that these 6 issues will account for 90% of your mistakes!

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)