As a web designer and developer, I use the Inspect Element tool regularly to find elements on a page that I want to style or change.
With Inspect Element, you can easily pinpoint a CSS class for a given selector. It is a great tool for modifying styling of a WordPress theme or plugin. This browser extension simplifies making changes to your website.
Modern browsers include Firebug. Right-click and look for Inspect Element, if you don’t have it working you can get it here and review the documentation
How to use Inspect Element
Right-click at the point on your page that you want to inspect and select “inspect element “. This will bring up the Inspect Element console. On the left, is the Node View pane displaying the generated HTML source of the page you are currently on. Firebug highlights the element so that you can discover what CSS elements are associated with it.
The Style panel (on the right side) shows you what CSS style declarations affect a particular selector. Firebug makes it clear which styles are actively affecting your HTML element. If there’s a line through it, then it means that another CSS rule has overwritten it by being declared after the former rule.
The CSS edits you make to the right side will display in your browser. You can then copy the CSS into the Additional CSS area in Customizer. You may need to clear your browser cache to see the changes take effect.
Firebug Video Tutorial
This is a great Video tutorial from Tips and Tricks HQ that shows Firebug in action.
