Post Format

How to Use Firebug to Modify CSS

I am a huge fan of the Firebug add-on for Firefox. Even though I use Chrome for a lot of my day-to-day web browsing, I always keep Firefox open when I am fiddling with websites. I especially like to use Firebug to figure out how a website’s CSS is structured and find where to make changes to the code. I can try out potential changes to the code—and see immediate feedback—without having to commit to them right away.

Identify the Element

The first step in using Firebug to make a style change is to identify which piece of code is controlling the element you want to edit. For example, I have decided that I want to change the “Follow me on Twitter” link on one of my websites. It’s a little boring.

Plain link with text? Yawn.

Plain link with text? Yawn.

The first step is to right-click on the link and select “Inspect Element with Firebug.” You can do that with any element on your website: images, links, menus, plain text, the background, …

Inspect Element

At the bottom of the browser window, a control panel pops up, highlighting the HTML for that link on the left and displaying the CSS that controls the style on the right.

Firebug Panel

(Click on the image to see the panel in more detail)

Explore the Existing Code

Once you have found the spot in the HTML and CSS that controls that element, it’s time to explore the existing code. One important step when you want to fiddle with the CSS: Check which style sheet the code is coming from. As you can see, there are different pieces of code that modify this element.

Check Stylesheets

The style sheets are identified with a link on the very right-hand side. The code at the top of the list is the code that takes precedence (for example, the version 3.4.1 style sheet takes precedence over the default style sheet, which takes precedence over the reset style sheet). Code that has been overwritten by another rule is represented with a line drawn through it. Right click on any of the style sheet links, and you can copy its location, open it in a new tab, or make changes to the element’s style (even adding rules if you need to change a different property).

Sidenote: Check to make sure that the rules you are playing with belong to style sheets you can change. I had frustrating surprise the other day when I realized that I was trying to overwrite a style that belonged to an external style sheet—and it had precedence!

Make Changes—and Check the Results

Now you can start playing! Want to see what happens when you take away one of the rules from those style sheets? Hover next to the rule and click the red circle that appears next to it. If any other code can take its place (in this example, the link color from another part of the style sheet), the line through it will disappear and you will see the results of the change on your screen.

Ignore Code

By clicking on any of the rules themselves, you can modify the code and see the results right away. For example, I could click on the color property and change it by entering a different color. (This doesn’t make any permanent changes, and you are the only one who sees the results. So don’t be afraid to experiment!) You can also add new CSS rules by right-clicking in the CSS box and selecting “Add Rule…” I added a rule for a.twitter-follow to add a little brightness to my Twitter link:

Styled Twitter Link

Keep the Changes … Or Not!

I don’t think I’ll be keeping the bright red Twitter link—and all I have to do to return to normal is refresh the page. But if you do want to save your changes, just be sure to copy the code into the correct document. You can even switch from the HTML tab to the CSS tab on the Firebug panel if you want to try out your changes by making changes directly in a specific style sheet. (That’s also a nice way to browse entire style sheets at once.) When you’re done, you can just copy and paste your changes into the real style sheet document.

Firebug has a lot of tools, but these techniques for playing with the CSS are the ones I use most often. It’s an easy way to sort out complex style sheets and experiment with a website’s design!

Advertisements

Posted by

Excellence Wrangler for Automattic, the company behind WordPress.com. Linguaphile and Translator. Tester.