Tuesday, December 04, 2007

Firebug CSS Feature

The next tab in the Firebug add-in is the CSS feature.  This feature allows you to view the CSS files that have been included with this page, toggle those styles on and off, and edit the styles.

css feature

Again, this tool can be extremely helpful when debugging your CSS.  On the main toolbar, you have the ability to select the style sheet that you want to view.  If the page has more than one style sheet, it will show in this drop down.

stylesheet dropdown

From the default view, you can toggle individual styles on and off by clicking on the icon next to the style:

style toggled off

You can also switch the view to edit so that you can modify the CSS just as you can the html.

css edited

This is such a useful feature for folks that are trying to learn CSS, or those that are stuck with projects in which the edit -> view change cycle is extremely inefficient.  Give it a whirl next time you are trying to shake out the style and layout of your site.