Can you add new CSS properties in Chrome Inspector?

Question

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

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

Answer 1

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).