Click and edit CSS with Firefox?
With firebug installed, right click on the item you want to select and click on the check item.
From the web developer toolbar, press ctrl + shift + f to open an item that displays fields and shows items.
To edit the document in firebug after checking an element, you simply change the values by clicking on individual elements or adding new elements. Please note that this data will not be saved without additional plugins.
There is a tutorial on using firebug here: http://getfirebug.com/html
a source to share
You need to right click on the page and select "Inspect Element".
Alternatively, you can select the "check item" option on the toolbar, and when you hover over items on the page, whatever is under the mouse will be immediately detected in the Firebug window. From here you can view / edit / manipulate the basic html and css.
http://getfirebug.com/wiki/index.php/Main_Page
The links above can link to the Firebug site and the wiki has some pretty good information as well.
a source to share
You can use Firebug to check what is in use. It is not easy to find documentation on the internet, and once you get the idea, you can easily select the elements, see their applied styles and where they came from (including inheritance and overwriting).
There is also a very good web developer dashboard with many possibilities:
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
It may take a while to try everything and find the ones that you really need for your task, but it's helpful to understand the structure of the elements and the CSS that are already being applied to it.
Firebug also allows 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 already exists and you can edit it in the sidebar (modify, delete or add files as you wish).
All can be combined, firebug and web developer to get a feel for what is already there, and EditCSS for live editing.
a source to share