Click and edit CSS with Firefox?

Question

I want to be able to click on a part of a webpage and see the CSS markup.

What CSS rules it uses, the class, id, etc. and be able to edit them live.

I have installed Firebug and web developer plug-ins, but I don't know how to do this.

Answer 1

You need to right click over the page and select "Inspect Element".

Alternatively, you can select the "inspect element" option on the toolbar and as you hover over items on the page, whatever is beneath your mouse will be instantly revealed within Firebug window. From here you can view/edit/manipulate the underlying html and css.

http://getfirebug.com/html

http://getfirebug.com/wiki/index.php/Main_Page

The above links may be referenced to the site for Firebug and the wiki has pretty good information as well.