Can you add new CSS properties in Chrome Inspector?

Yes, it's possible to add new CSS properties in the Chrome inspector and review them in a few easy steps:

1. Right click in the element you want to change and choose "Inspect element";
2. Click the "New Style Rule" button (1 in the image below);
3. Google Chrome will assign a CSS matching rule which you can rename (2 in the image below);
4. Add your CSS rules (2 in the image below);
5. When you're done just check the "Computed Style" pane (3 in the image below).

You can add new property in a rule double clicking within the rule. Also you can add a new rule from the wheel in the corner and then select "New Style Rule".

To view the whole revised document go to: Resources > Frame > site name > Stylesheets > stylesheet-name.css

Or simply Click the + symbol above the css properties

Is it possible to add new CSS properties in the Chrome inspector? It seems that you can only edit existing properties...

Simply double-click in any white and empty space in the "Styles" panel.

I tend to double-click to the right of the } for whichever CSS rule I want to edit.

Also, once you edit the properties, is there a way to view the revised CSS as a whole?

See @Sotiris's answer.

Not that I know of.

There may be an extension that can do this, but if one exists, it probably won't preserve the exact formatting of your original CSS.