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 and 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.

Thanks.

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.

Answer 2

Right Click->Inspect Element..... Just do a right click on the element you want to see and select Inspect Element...

Answer 3

With firebug installed right-click the element that you want to select and click inspect element.

With Web Developer Toolbar, push ctrl+shift+f to open up the thing that outlines boxes and shows elements.

In order to edit the document in firebug after doing inspect element, you just change the values by clicking on the individual elements or adding new elements. Be aware that without extra plugins this data won't be saved though.

There is a guide to using firebug here: http://getfirebug.com/html

Answer 4

Using firebug, right click and select inspect element.

Using Web Developer toolbar, click on CSS, then click Edit CSS from the dropdown menu.