What is Firebug?
Firebug is a plugin for Firefox that helps you analyze and improve your CSS (along with your HTML and JavaScript).
Installing Firebug
To install Firebug, run Firefox, then browse getfirebug.com and follow the instructions.
Using Firebug
Browse a web page, and right-click on or near some element you wish to examine.
From the pop-up menu, select Inspect Element.
Firebug opens a panel that displays the HTML for this page, along with panels that provide information about CSS and other page-related information.
In the Firebug HTML panel, click on tags to select them. Selected tags are highlighted in Firefox.
Right-click on tags for a pop-up menu related to the selected.
You can also edit the HTML — add and remove tags, edit tag attributes — and see the effect in Firefox.
Firebug’s CSS panel displays CSS rules for the selected tag. You can edit the CSS rules in the panel, immediately see the effect in Firefox.
Example: Tower of Babel
The image below is a screenshot of Tower of Babel (towerofbabel.com), a blog where I occasionally post.
On the Home Page, there are situations where the p tag (paragraph) has top and bottom margins of zero, which I dislike for aesthetic reasons. The specific situation is where p tags occur inside blockquote tags inside blog posts. In the screenshot below, I have highlighted such a p tag in Firebug (click for full-size image):
The screenshot above shows how Firebug displays the HTML for this page, along with a CSS panel showing rules for selected elements. Also note how Firefox highlights an area in the browser window corresponding with selected elements.
Here is the first selector in the Firebug CSS panel:
blockquote p (global.css line 254)
The above CSS rule states that paragraph tags in blockquotes have zero margin and padding. We could set margin or padding or both to positive values for this rule, but we should consider if that change might affect page elements that we don’t wish to change. If so, use a more specific selector.
Consider the second selector in the Firebug CSS panel:
.post-content blockquote (global.css line 289)
The above selector refers to blockquote tags inside tags having “post-content” as a class attribute, in this case a div tag with the class=”post-content” attribute. This rule does not directly relate to the paragraph margin problem, but it does suggest a new CSS rule to implement the margin:
.post-content blockquote p { margin-bottom:10px; }
The above rules defines a bottom margin of ten pixels for all p tags inside blockquote tags inside any tags (div tags, in this case) having the attribute class=”post-content”.
The old rule is defined in the external style sheet named global.css, on line 254.
The new rule (.post-content blockquote p) must appear below the old rule (blockquote p).
The new rule may be defined in one of several places:
1. Below line 254 in global.css
— Best if you want the change to be global (affects the entire web site)
2. In a different external style sheet, which must appear below global.css
— Best if you want to override global.css on some pages but not others
3. In a style tag, which must appear below global.css
— Not best, but tolerable if you have exactly one page which must override global.css
Other Browsers
Google Chrome has similar built-in developer tools, as does Internet Explorer 8.
