Firebug keeps surprising me. I’ve recently been working on code for several web designs and this little trick helped me to understand existing HTML and CSS much faster. Just to give an example I use our Justaddwater RSS feed page (but could be any page).
Before you start, get Firebug for Firefox (if you haven’t got it already).
- Press F12 and the Firebug window appears below in the browser window
- Start the HTML inspector and mouse over any element, you want to learn about.
- Now, you can see the HTML, the hierachy,and the CSS rules. For me it has been very useful, that overridden CSS rules are marked with strikethrough text. That’s a very handy information when CSS specificity plays in with a trick or two.
- Press escape to stop inspector mode, and move mouse down to CSS rules.
- Mouse over the CSS rules reveal a small icon to toggle the line. See screenshot animation below.