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

Answer 2

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

Answer 3

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.

Answer 4

Why not? Here is the screenshot of the Styles panel of the Google Chrome inspector

Notice the block:

element.style {

}

You just click with mouse in that area and inspector will give you an opportunity to add new styles. If you need to add a new attribute to an element, you right click on it in the Elements panel and choose 'Add attribute'.

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

Doesn't Computed Style panel give you this information? There you can check al lthe styles applied to a node and, actually, in what rule and from what stylesheet they are applied.