How to Debug CSS With Firebug

Mozilla's Firebug add-on helps web designers and programmers who deal with a number of popular languages to compile most sites and pages. One language Firebugs helps out with is cascading styles sheets, or CSS. CSS is the language designers use to efficiently set properties for web elements like borders, headings and backgrounds. These used to be done with clunky HTML. Now, you can write them in CSS and optimize them with Firebug.

Instructions

1. Open the Firebug application, and use the user-friendly menus and command buttons to acclimate yourself to the environment.

2. Look at how CSS uses "cascade" coding. Firebug displays the path of coding for an element in ways that you can follow, helping you identify problems in your script.

3. Run Firebug's "graphic overlay" feature to see how code and elements fit together. This brilliant adaptation makes code crystal clear. When you put your mouse over a piece of code, Firebug actually shows you the image of the element it applies to, so you can see how the text informs the object.

4. Operate Firebug's text-editor library to auto-complete commands. Firebug actually helps you code by completing your thoughts for you. This can be especially helpful if you have a spotty memory of CSS syntax.

5. Utilize the up or down arrow keys to cycle through all of the possible designations for the attribute you're typing in the "turbo" version of the auto-complete function.

6. Use Firebug's "disable" command to temporarily knock out certain code modules to see how the page works without them. This is another great diagnostic tool Mozilla provides to help you do smarter coding.