CSS Tweaking With Firebug

Before my life was permanently interrupted last week I'd written a blog entry, slated for a Tuesday posting, about tweaking CSS with Firebug. Since then I've found this screencast which offers a complimentary look at Firebug features. Watch that then read below. If you can't tell, I'm really trying to get you all using Firebug!

So, you've created your site's markup and CSS and all seems well. However, you need to do some tweaking, as some bits just don't look right. This is often the tedious part of any design as it involves constant back-n-forth between Designer and browser as you edit/save the CSS and refresh the webpage. Each time you change the CSS and come back to the browser you hope it's going to be the change that will fix it.

Using Firebug you can eliminate this "rinse and repeat" approach to CSS editing. Instead you can tweak the CSS "on the fly". When you're done you can copy the working CSS and paste it back into Designer, only needing to re-save it the once. Here's a simple, probably useless, example of how.

Open the page in Firefox and open Firebug. Press the Inspect button and then on whatever is causing you issues. In this case I clicked a link. In the right-hand pane (Shown here. Click for full shot) you can see all the CSS rules applied to that link.

Notice how you can hover over a hex colour value and see what colour it is. You can also hover over images specified by a url() rule for a background and see the image. Both really nice features.

Let's say I don't like the colour of this and other links. Clicking inside the CSS rule's value I can edit it directly and see the change on the page. Click the image to see the change.

Notice also the greyed-out "no entry" sign next to each CSS rule. Click on this and you disable the rule completely. In this case this has the effect of making links the default browser colour.

Taking it further you can even add new rules to each selector. Right click the CSS area to see how. When you've got the results you're after you can click the link to the stylesheet you're editing (cstore.css in my case), which will open it in its entirety. Now you can Ctrl+A to select all the CSS and copy/paste it all back in to your Domino Page element.

Changing link colours is a poor example of how useful this CSS editor can be. It's much more useful when you're trying to use CSS to layout your pages.


    • avatar
    • Richard Shergold
    • Wed 20 Dec 2006 05:49 AM

    Jake, the screencast link doesn't work. Richard. (how's Felix - or am I not allowed to ask that?)

    • avatar
    • Jake Howlett
    • Wed 20 Dec 2006 06:00 AM

    The link works. It's the website that's broken.

    Felix is fine. Midwife has just been and he's put on 4oz, which, apparently, is good going. Apart from that he's the model baby and I couldn't ask for any more.

    • avatar
    • Richard Shergold
    • Wed 20 Dec 2006 07:07 AM

    Yes, sorry it was the website. It's fine now though.

    • avatar
    • carcomaidon
    • Wed 20 Dec 2006 08:00 AM

    That's nice, I like it. I've been using Ctrl+Shift+E to do this though .... no need of firebug but this is more powerful

    • avatar
    • Jim
    • Wed 20 Dec 2006 08:02 AM

    I now realise why you did the FF layout first :-)

  1. Thanks for tip carcomaidon. Now I know the shortcut to launch Excel. woohoo!

    • avatar
    • Ketan
    • Wed 20 Dec 2006 05:11 PM

    Great tip. I love Firebug more I use it.

  2. This rocks. Thanks for the tip Jake. Used it to quickly tweak a CSS problem last night and it motivated me to get my Linux FF install working properly. couldn't install the DOM Inspector for some reason, but the 2.0 bulid I got from Mozilla came with and now Firebug can do it's stuff. Sweet!

  3. I also prefer Ctrl+Shift+E as carcomaidon posted.

    As Michael noticed ironically, it only opens the css editor if the "Web Developer" extension is installed.

    A "Must Have" for web developers


Your Comments


About This Page

Written by Jake Howlett on Wed 20 Dec 2006

Share This Page

# ( ) '


The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social

About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »


Here are the external links posted on the same day.

More links are available in the archive »

More Content