Search code examples
cssgoogle-chromelivedeveloper-tools

Using Chrome's Developer Tools to edit the page live with new global CSS rules

It's easy enough in Chrome Developer Tools to inspect an element and edit an existing CSS rule applying to that element but what if you want to create a whole new style rule?

In my case what I wanted to do was apply the following style rules:

br {display: none} hr {margin-top: 20px} font {font-size: 18px}

To the Principles behind the Agile Manifesto so that I could print it out on one A4 sheet of paper directly from the browser.

The official document on Chrome Developer Tools that I've already linked to does have a section on Adding New Rules and Properties but it's out of date and doesn't work like that in the latest version of Chrome.

Solution

  • There is now a dedicated button in the Styles pane for "New Style Rule". It looks like a plus (+):

    new style button

    This will create a new style block which will allow you to define the selector yourself:

    effect of new style button