I dabble in HTML and CSS. I am by far not a pro, but hey, I can style some div’s. Until recently I have just edited my CSS and reloaded the page to see how it looked. Not only is this slow, it is also really hard to understand. I never had a clue where my div’s were, or what margin was affecting what.
Enter Firebug, which is a plugin for Firefox. Firebug happily sits in my Firefox tray until I “inspect” an element. When you hit the magic key combo “cmd-shift-c” the cursor highlights the div or element in the browser. Then when clicking can see the HTML, and all the CSS that affects that element. So for example if I wanted to change the color of some text I could “inspect” it and see the CSS that controls it. Not only that, it’ll show all the CSS that is ignored because it is overridden by a div closer to it!
Holy cow; this makes tweaking a million times faster. Did I mention yet that you can change the CSS on the fly to see how things look? Yes, you can. If you want to see what 30px text looks like you can simply change the value; BAM, the text displays at 30px. If you can’t figure out what div is bumping something out of the way you can just inspect that area, and you’ll find the culprit faster than fast. Then you can change the width, height, margin, or whatever you please.
Firebug rules.
Jeremy Chase