Firebug : 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 and images

As you move your mouse over colors and image URLs within the CSS tab, a handy little tooltip will appear previewing the color or image. The image tooltip also shows you the dimensions of the image file, which can a huge time saver, especially when you need to write CSS to make an element fit the size of an image precisely.

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, or by ten if you use the page up and page down keys.

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.





Quote from : FIREBUG