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

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 2

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 3

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

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.

Answer 5

You can use Firebug to inspect what is being used. It should not be too hard to find documentation on the web, and once you get the idea you can easily select elements, see their applied styles and from where they came (including inheritance and overwrriting).

There is also the very good Web Developer Toolbar with a lot of possibilities:

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

It could take you some time to try them all out and find the ones you really need for your task, but it is helpful to understand the element structure and the CSS that is already applied to it.

Firebug also allows some editing, but there is another tool, EditCSS

https://addons.mozilla.org/en-US/firefox/addon/editcss/

It opens a sidebar with all the CSS that is already there and you can edit it in the sidebar (change, remove or add stuff as you desire).

All can be combined, firebug and web developer to understand what is already there and EditCSS for live editing.