Tweaking the inline style of an element in Firebug

One thing that I always like about Chrome’s Web Inspector over Firebug in Firefox is that in Chrome, there is an easy way to tweak the CSS of an individual element by editing its inline style.

chrome_web_inspector

 

It is always available right at the top of the CSS editing tools in Chrome and I always found it to be a handy way to tweak an element without the distraction of all other similar items being changed. In Firebug, you just get the latest style at the top of the window.

firebug_css

 

I don’t know why I never tried this, but I finally figured out that simply right-clicking in Firebug’s style window gives you the option to “Edit Element Style…” Yes, it is that simple. Choosing that option will put an element.style option right at the top, just like in Chrome’s Web Inspector.

inline_css_firebug

1 thought on “Tweaking the inline style of an element in Firebug

  1. Thanks for this!! I’ve always wanted to do the same thing in Firebug that I can do in Chrome.

    Google search and you to the rescue! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *