Web Dev, Linux, WordPress & More

Edit CSS Using the Firefox Web Developer Extension

by eric on July 25th, 2006 in: Uncategorized

Make quick changes to your CSS file and see the effects in real-time using the Web Developer Toolbar for Firefox. It’s a very handy tool to create and troubleshoot stylesheets on your website.

What’s the Web Developer Toolbar do?

It simply adds a toolbar and menu to your Firefox browser with all sorts of helpful tools for designers and developers.

In fact, it’s so packed with cool tools, I’m just going to highlight one feature right now: the Edit CSS sidebar.

Edit CSS

Edit CSS with the Web Developer ToolbarThe Web Developer Toolbar’s CSS dropdown allows you to quickly view a site’s CSS file(s) and, best of all, Edit CSS on the fly.

I use the Edit CSS feature on every project because it allows me to pull up any website, view the CSS in a sidebar and make real-time tweaks to the style sheet. It’s great for troubleshooting.

I can’t say enough about the power of this tool for designers. If you’re coding with Web Standards and making use of CSS for the presentation of your pages, you’ll love this tool.

How to Edit CSS

Simply browse to a site in Firefox, click the CSS button and select ‘Edit CSS’ and change the CSS in the sidebar and see how it looks.

Some Warnings

  • It does not automatically save any of the changes that you make. You must use the save button to save the CSS file to your local machine and then upload it to your server if you want to see the changes made permanently.
  • If you browse away from a page that you’ve made CSS changes to in the sidebar, the changes are lost. It’s best to open a new browser window if you need to view another site.
  • It doesn’t render background images well, so you may notice that backgrounds assigned to elements disappear. Try it on this site and you’ll see what I mean.

Tips

  • Trying to figure out which CSS definition controls an element on a page? Try viewing the source code. In fact, if you highlight a smaller region of the page containing the element you’re targeting, right-click and choose ‘View Selection Source’.
  • Before you upload a modified CSS file to your server, I like to make a backup of the existing CSS file in case I’ve made a mistake or want to easily roll back to the previous stylesheet.

That’s all for now, I’ll continue highlighting some of my favorite features of the Web Developer Toolbar extension in other articles.

The Web Developer Toolbar was generously developed and contributed by Chris Pederick.

2 Responses to ' Edit CSS Using the Firefox Web Developer Extension '

Subscribe to comments with RSS or TrackBack to 'Edit CSS Using the Firefox Web Developer Extension'.

  1. Jim said:

    July 29th, 2006 at 11:23

    Nice tutorial, thanks. I love the Edit CSS feature.

  2. March 28th, 2008 at 15:21

    Very useful information 🙂 I see there are realy good tips. I am going to use some of them

Leave a Reply

%d bloggers like this: