Every modern browser has a built in element inspector. I use Firebug – an open source web development tool to find elements on a page that I want to style or change.
Firebug can help you easily pinpoint a css class for a given element and find the line number in your stylesheet without having to read through lines and lines of code. This simplifies making changes to your WordPress website or blog.
If you want to give it a try, start by downloading Firebug or use the browser inspector of your choice.
How to use Firebug
Right click at the point on your page that you want to inspect and select “inspect element with Firebug”. This will bring up the Firebug 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 (in the right) shows you what CSS style declarations affect a particular element. 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.
Browser inspectors let you play with the HTML and CSS of a web page and see your changes in real time. The changes you make in your browser inspector don’t affect the live website — they’re visible to you only, reload the page, your changes will be gone.
This is a great Video tutorial from Tips and Tricks HQ that shows Firebug in action.
https://youtube.com/watch?v=956IDvJ2Aa0%3Frel%3D0%26start%3D174
Additional Resources:
- Get Firebug and review the documentation
- Another post that explains using Firebug.
So are you going to try Firebug? Leave me a comment. I’d love to know what you think of Firebug.
