You Are Here: Home » How to Use the Chrome Inspector to Edit Your Website CSS

How to Use the Chrome Inspector to Edit Your Website CSS

This is a cartoon of an inspector with a magnifying glassMy life as a web designer was changed once I figured out that I can use the Chrome Developer Tools Inspector to play with the CSS on my websites. There are many uses for these great tools, but here I am focusing on using it for CSS specifically.

I did my first ever screencast to easily show you how I use the inspector every day to try out design tweaks before committing them to my custom themes. Even if you are not using a custom theme, you can follow these steps and paste your edited CSS into the Custom CSS tab in the Theme Customizer (if your theme offers this or you are using Jetpack).

To access the DevTools, open a web page or web app in Google Chrome. Either:

  • Select the Chrome menu This is the Chrome Hamburger Menu at the top-right of your browser window, then select Tools > Developer Tools.
  • Right-click on any page element and select Inspect Element.

You can use the Elements panel for a variety of tasks:

  • Inspect the HTML & CSS of a web page.
  • Test different layouts.
  • Live-edit CSS.

You can view and modify the CSS for any element on the current page. It helps to have an understanding of how CSS (Cascading Style Sheets) work in order to work with the inspector, and understanding the hierarchy of elements will save you a lot of wasted time trying to change a style for an element that is then overwritten farther down the cascade.

You can add or edit styles within the Styles pane in the Elements panel. Unless the area containing the styling information is greyed out (as is the case with user agent stylesheets), all styles are editable. Edit styles in the following ways:

  • Edit an existing property name or value.
  • Add a new property declaration.
  • Add a new CSS rule.

To enable or disable a style declaration, check or uncheck the checkbox next to it.

Click an element in the page or the html element for the corresponding CSS:

This is a screenshot of the Chrome Inspector

This is a screenshot of the CSS in Chrome Inspector This is a screenshot of the CSS in Chrome Inspector

Click on a property value to edit the value. If you’re editing a property name, press Tab or Enter to edit the property value.

By default, your CSS modifications are not permanent, changes are lost when you reload the page. My preferred method is to copy my edited styles into my text editor and then add then selectively to my theme’s style.css file. Chrome also offers Workspaces, which automates some of that process. I haven’t tried it yet, as I am usually making minor and specific changes/tweaks which are easy to copy into my theme.

If you are having trouble identifying the selector for an element, you can try using the New Style Rule (+) button at the top of the Style tab/pane. If you have clicked on the element on the website that you want to edit and then click the “+” button, sometimes it will pull in the nested styles so you don’t have to search for it. I find this does not always work. .

Note: When you create a new rule using New Style Rule, the new rule doesn’t belong to an existing stylesheet. DevTools adds it to a special inspector stylesheet. The inspector stylesheet can be edited in the Sources panel, like other files.

This is a very basic, first step for using the inspector. You don’t have to have your own website to do this! You can play with any website … it’s a great way to expand your knowledge and familiarity with CSS. Here’s an example changing the color of the button on the Google search page.


  1. Pro versions on April 27, 2019 at 1:48 pm

    How can we use inspect element on android

  2. Tara Claeys on August 30, 2020 at 8:54 pm

    I see this is the code on this page? What do you want to change it to? You might have to use !important if your code is not overwriting the theme.

  3. Bora on April 2, 2021 at 10:20 am

    How can we save the online edited style sheet? It changes it to constructed stylesheet and it disappears from Sources panel.

    • Tara Claeys on April 2, 2021 at 12:27 pm

      You need to copy it and paste it into your style sheet.

      • Bora on April 2, 2021 at 4:10 pm

        Thanks for answer but is there a way to save the stylesheet as a file? I’ve made lots of revisions online. And now I don’t close the browser window not to loose the changes. It is very difficult to find and copy-paste them to the original stylesheet.

        • Tom on October 8, 2021 at 8:05 am

          I would just do this:

          1) In the inspector, off to the right you have the name of your CSS file (e.g. “styles.css”). This is a link that actually opens the file in a more full text editor.

          2) Work on your CSS code in here. What’s nice is, as you’re writing your CSS the browser shows your changes live as you do them.

          3) Once you’ve gotten everything to look and behave the way you want in the page, do a “select all”, copy the entire code, then in your original file (opened in VS Code or Notepad++) do “select all” and paste. It will overwrite everything in your CSS file, but you’re essentially only changing the things you modified. Then after this, you can save/upload your style sheet as you usually do.

Leave a Comment