CSS Editing with the Help of Web Inspectors

We’ll be moving on to live examples in a bit so you can see in real time how to make CSS Edits using the web inspector. In a nutshell, here is the process:

  • Right-click the element whose style you wish to change. In the menu that pops up, select “Inspect Element”.
  • Examine the CSS of that element, and make your changes in the web inspector. You’ll get a realtime preview.
  • When you have it to your liking, copy the updated CSS changes into the CSS Panel (Self-hosted WordPress: Customize → Additional CSS / WordPress.com: Customize → Custom Design → CSS).
  • Save your changes in the CSS panel and reload your site to see the changes.

Now we will have some examples that walk through some common things people change with CSS.