shortcut key for inspect element in chrome mac

There are many uses for these great tools, but here I am focusing on using it for CSS specifically.

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

Unless the area containing the styling information is greyed out (as is the case with user agent stylesheets), all styles are editable.

If youre editing a property name, press Tab or Enter to edit the property value.

My preferred method is to copy my edited styles into my text editor and then add then selectively to my themes style.css file.

Chrome also offers Workspaces, which automates some of that process.

I havent tried it yet, as I am usually making minor and specific changestweaks which are easy to copy into my theme.

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 dont have to search for it.

The inspector stylesheet can be edited in the Sources panel, like other files.

You dont have to have your own website to do this You can play with any website its a great way to expand your knowledge and familiarity with CSS.

However, some parts of my site will allow me to inspect and edit live, but fail in the customize section.

Shortcut Key For Inspect Element In Chrome Mac