Beginner’s Checklist Before Debugging CSS
Tags: Beginner
I have been mentoring some friends with their web design / front-end development and I noticed a common pattern of mistakes that they tend to make that I would like to share today. Although the following examples may be stating the obvious, it seems most beginners make these mistakes quite frequently. So if you are a beginner, please read on!
Scenario
Beginner CSS Designer Says: “I need help! I added a class on my style sheet, but it didn’t do what I wanted it to do. Must be my css code, can you fix it?”
What Could Be Wrong?
It very well might be your CSS, but before we jump into conclusions, be sure you followed a logical thought process in coming to that conclusion. Narrow down your possibilities, this is how you debug.
Checklist:
- Is your style sheet uploaded or saved?
Are you able to view your CSS code changes in the browser? If you don’t see changes, you failed this step. - Are you referencing your CSS in your html?
The html will need to reference the style sheet to act upon its properties. - Be sure you are using the right syntax
- CSS is case sensitive.
- Cannot start a class name by a digit or a special character (ex: a hyphen ‘-’), and it must start with a character (A-Z).
- Classes start with a ‘.’ (ex: .classname) and ID’s start with a # (ex: #idname). Be sure you are not missing or mismatching them.
- Be sure your class/ID is grouped within curly brackets {} and your class/ID properties are closed with a semicolon.
- Be sure your class/ID names are spelled correctly. As silly as this sounds, we all make mistakes! Double check your spelling whether it’s a class/id name or a property value.
- Are you sure you are editing the right site/stylesheet/ file?
Some people do make these mistakes, which is why it’s important to view your source code thoroughly. Doh! Always double check your source, that’s the first thing you should do! - Did you declare the correct doctype?
There will be some funk if you don’t declare your doctype (especially with IE). - Is your CSS validated?
Run a validation on your CSS. It’s always a good to validate your code as you’re developing. This will keep you in check for good coding habits and you will learn from the errors that you will find.
If you verified that the above list is fine, then its time to question your CSS from the behavior perspective. Check out my previous tutorial on how to debug CSS and also equip your self with the right debugging tools for further investigation!
Conclusion
I believe a lot of these mistakes come from lack of knowledge of basic web functions and html. If you find yourself falling in these footsteps, be sure you build proper foundation by fully understanding html and how the web works in general. Once you have the foundation down, and with enough practice, you will gradually find your self debugging a problem within seconds/minutes. Keep it up and don’t give up, your almost there!
Beginner Resources
- CSS Cheat Sheet V1
- CSS Cheat Sheet V2
- CSS Property Index
- CSS Reference Guide (PDF)
- CSS Shorthand Guide
- CSS Beginner Mistakes: “Divitus”, Absolute Postioning
- Are You Making These 10 CSS Mistakes?
- 10 Common CSS Mistakes
Related Posts
Author Bio
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!
You can learn more about me or 
Follow me on twitter for more updates and resources!
Did You Enjoy This Post?
Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.
+ Add Comment8 Peeps Have Spoken Their Minds...
I find that the simplest way to check all those is to make an obvious change (personally I go for the nice red border) and if nothing obvious happens on the page you know you did something dumb instead of just a small mistake.
Learned the technique back in my Pascal days in the late 90′s, always useful and all newbies should learn to cherrish it.
@ Swizec
Amen to the big red border method. Possibly the single most useful trick I know in CSS (believe it or not!). Saved me from many headaches.
ah yes, the almighty red border! I would definitely recommend that as well, but some beginners have a hard time figuring out where to look for problems (ex. the red border is not showing up, where to look now?), so these steps are in my opinion still a valid check list to go through.
Maybe red border first, then go back to the list :-)
Thanks Swizec!
Thank you very much for this list, I guess I’m one of those people who make these really dumb mistakes X-p
This should definately put me on the right track :-)
thanks
Here is another great tip.
The Order of the Rule…..
I find that defining the properties in the same order for every rule is a major help when debugging your style sheets.
It is a method I’ve never seen on any other designers site style sheets (even your style sheet!)
It is a concept that I came up with a few years back after the frustration of debugging style sheet after style sheet.
Here is an example:
#ruleOne{margin: 0, width: 10px; height: 10px; padding: 0; background: #fff; color: #000;}
#ruleTwo{margin: 0, width: 20px; height: 20px; padding: 0; background: #000; color: #fff;}
#ruleThree{margin: 0, width: 30px; height: 30px; padding: 0; background: #00f; color: #f00;}
(Above are common properties in a simple order for the sake of the example.)
You can see what ever property that needs to be tweaked can be easily located within the rule.
The rules become far easier to read. And Math; one of the number one culprits to most css bugs is easy to spot and calculate. (it’s amazing how many browser discrepancies really boil down to properly calculating properties in the rules.)
What I commonly see in style sheets are a hodge-podge of properties that are slapped together as the designer needs to add the rule property.
It is common for rules to look like the following:
#ruleOne{background: #fff; width: 10px; padding: 0; height: 10px; margin: 0; color: #000;}
#ruleTwo{padding: 0; margin: 0; height: 20px; background: #000; width: 20px; color: #fff;}
#ruleThree{color: #f00; margin: 0, background: #00f; height: 30px; padding: 0; width: 30px; }
No rhyme or reason. Just a list of properties inserted into the rules as the designer find the need to insert them not realizing that it is later difficult to debug.
Regards,
William
Thanks for shring…
admin thanks for this website
Speak Your Mind...