I decided to try out the built in Firefox Developer Tools. Seems to be nice, but...
I can't find out how to add a new rule to the CSS from Inspector/Rules. By that I mean ".my-new-rule" not just the "element" rule that is open by default.
FINAL EDIT: This is now possible with the latest Firefox update.
As of FF 33.00 it is now possible to add new CSS rules using the inspector!
It is not possible to use the inspector to create new CSS rules with out a browser add-on (see comment below).
Just use the style editor. Type anywhere to make a new rule: