Live editing of website code and styles is a breeze with the Firebug plugin for Firefox.
Right click any element on the page that you wish to inspect/edit and select the Inspect Element option. The Firebug panel opens with the HTML displayed, and the element you selected highlighted. In the right panel are the CSS styles attached to that element. From here we can make changes to the current styles, or add new styles.
I do this constantly when working on sites as it gives me realtime feedback and visualisation of the changes I make. Once the styles are working correctly and everything is looking the way you want it to it’s time to copy all those changes back into the actual stylesheet. But can you remember all the changes you made, and to what elements? This is where the pro tip comes into play.
To the right of each of the style declarations is a hyperlink to the relevant CSS file and the line number the declaration is on in that file. Click this link to display the full CSS file in the Firebug CSS panel. Click the Edit button in the panel to view the plain text content of the CSS file, including the changes you’ve just made. You can now select all, copy and paste into the actual stylesheet. That’s it!! Save the stylesheet and transfer it to the server to see all the changes applied to the live site.