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.