Inspect Element Web Development Tool | LearnWP

Inspect Element Web Development Tool

Inspect Element Web Developer tool

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 panel

Firebug Video Tutorial

This is a great Video tutorial from Tips and Tricks HQ that shows Firebug in action.

Related Posts

If you liked this post, you might also be interested in one of these.
Getting over your blogging discomfort
Color Cop: choosing website colours (for Windows)

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top