Our favourite Browser extension is Firebug (inspect element) – an open source web development tool. As a web designer and developer, I use Firebug 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.
Firebug Video Tutorial
This is a great Video tutorial from Tips and Tricks HQ that shows Firebug in action.
Learn how to use Firebug
If you want to learn how to Inspect Element to modify a WordPress theme or style a plugin, take our Workshop: HTML & CSS for WordPress Users
[cross-posted on the Dandelion Web Design Blog]