CSS Panel

CSS Development

Firebug's CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can make changes and see them take effect instantly.

Inspect the cascade

Without Firebug, you're left scratching your head when the headlines on your page come out blue, when they should have been black. With Firebug, inspect the problem element and before you can blink you'll see the CSS that is causing the problem.

Firebug shows you the rules that cascade together to style each element. Rules are sorted in the order of precedence, and properties that have been overridden are stricken out. Each rule has a link back to the file where it came from which you can click to jump to the line.

Preview colors, images and fonts

As you move your mouse over colors, fonts, gradients or image URLs within the CSS tab, a handy little tooltip will appear previewing the value and providing a lot more details. For instance, the image tooltip shows the dimensions of the image file, which can be a huge time saver, especially when you need to write CSS to make an element fit the size of an image precisely, the font-preview shows an example text, etc.

Tweak tweak tweak

Editing CSS has never been easier. Click any CSS property and a little text editor will appear. As you type, the changes are applied immediately. You'll want to kiss Firebug when it autocompletes as you type against the list of possible values for the property you are editing. You can use the escape key to cancel changes you have made, or use the tab key to move from one property to the next.

A little higher... a little lower...

Autocomplete is a great time-saver when you're typing words, but what if you're typing numbers? If you're trying to make something line up perfectly, just use the up and down arrow keys while you're editing a number. Firebug will increment or decrement the number by one. You can also use Shift+Up/Down and Ctrl/⌘+Up/Down to increase/decrease by 10 resp. by 0.1

Learn as you go

If you're still learning CSS, Firebug is a great tool for sharpening your vocabulary. While editing a CSS property, use the up and down arrow keys to cycle between all possible properties in alphabetical order. Firebug has the complete dictionary of standard CSS keywords in its memory, along with some proprietary Mozilla additions.

Now you see it, now you don't

Often, the solution to a problem can be found just by disabling a few CSS properties and seeing what the world looks like without them. As you mouse over each property, you'll see a little circular icon on the left. Clicking that will disable the property, and clicking it again will turn it back on.

Inspect any style sheet

While the HTML tab lets you inspect the CSS of a single element, the main CSS tab lets you see entire style sheets. Click on the list of files in the toolbar and you will see a nice outline of all the style sheets imported into the page.

Copy colors and image URLs

For many of us, copy-and-paste is the heart of all development. Firebug makes it easy to copy two of the most import style elements, colors and image URLs. Just right click and you'll have a context menu with clipboard possibilities.

When you copy an image URL, Firebug will copy the absolute URL of the image, even if the CSS is showing it relatively.

Open in external editor

Individual CSS files displayed by Firebug can be opened in external editors or IDEs. Firebug also allows to properly configure arguments such as line number, url, etc.

Computed Styles

Firebug offers a side panel that shows all CSS style values calculated by the user agent while interpreting the given CSS information for the selected node inside the HTML Panel. So, it shows the actual displayed styles.

Error indication when editing CSS properties

The inline editor that is used to edit CSS properties and their values indicates whether an input is invalid. Watch the editor's shadow color. If it's red, the value is invalid. You want to see green.

CSS pseudo-classes

Firebug allows to inspect code that uses pseudo-classes such as :hover, :active and :focus. The user can 'lock' selected elements to such a state, so mouse movements don't change it.

Source edit or Live edit

For the most part Firebug shows live objects directly out of the browser. Thus the editing in Firebug is live, you are not editing source. However, the CSS panel also supports source editing. In this case the user is editing directly the source of loaded stylesheets.