CSS Debugging

CSS Debugging wasn't even listed as a topic for this Techie Master Class series because debugging generally doesn't work like the other three languages. More or less, when things don't display right on your sites, you could have a CSS problem.

Although I will not be providing an in-depth CSS debugging tutorial for this series, I still at least wanted to talk about it briefly to point you in the right direction in case you do have CSS problems.

The main indication of a CSS problem is simply that the desired style doesn't display on your live webpage. Most of the time, this may just be because the CSS code isn't properly targeted to the element that you want to alter, or other CSS code on the site may even be overriding it.

Also be sure that your opening and closing curly brackets match up throughout your CSS code (Notepad++ can be useful for this purpose, especially when dealing with long/complicated code). Another cause of problems could even be missing semicolons between each of your CSS commands (everything between the curly brackets).

When all else fails, there is another way to try to diagnose CSS problems, but I actually recommend using this one last.

When you have problems with CSS, you can look at the Warnings tab of the browser Error Console to potentially discover the problem. The only issue with this is that there can be a lot of information in that Warnings tab, which is quite alright (Warnings can exist here and not cause problems on a live site).

Some CSS code may only be intended to work on specific browsers, so you will often see Warnings that mention an Unknown property, with the Declaration dropped. This may mean that the command is for another browser, but it could also just be a misspelling of a real command (hence the reason why I said this can 'potentially' help you discover the problem - this isn't quite as straightforward).

Just like with Javascript, if you can pick out a CSS Warning and need more info, just search for it on Google. You can typically find out specific information about the message you are receiving, especially if you remove portions of the message that relate specifically to your website.