Ever wished you could customize the look and feel of a website you frequently visit, and have the changes stick?  Sure you can use the Web Developer toolbar or Firebug, but that's a pain and also isn't persistent.  Overriding settings globally for things like link colors and font has been around for ages, but per-site customizations are a bit newer.

All you need is a text editor (or ChromEdit Plus) and a basic understanding of CSS.

1. Create a file called userContent.css in your Firefox profile directory, inside of the chrome directory.  On OS X this will be inside of <home>/Library/Application Support/Firefox/Profiles/>random characters>.default/chrome/ and %appdata%\Mozilla\Firefox\Profiles\<random characters>.default\chrome on Windows. If you've been upgrading since very old versions of Firefox the profile directory might be called default.xxx
2. Paste the CSS you want into userContent.css, but wrap it in an @-moz-document rule like this (assuming you want to see a white background on my site).

   @-moz-document domain(coreygilmore.com) {
    #bd {
     background:none;
    }
   }

3. Save userContent.css, close and re-open Firefox. Each time you edit userContent.css you'll need to quit and restart Firefox.  This is obnoxious, but not a high priority for Mozilla given the 5 year old enhancement request.

@-moz-document options

• @-moz-document url(http://lodoconversations.com/) – only the page http://lodoconversations.com/
• @-moz-document url-prefix(http://www.coreygilmore.com/blog/2007/) - anything beginning with

  http://www.coreygilmore.com/blog/2007/

• @-moz-document domain(backupmoxie.com) - anything on the backupmoxie.com domain

You can chain options also:

@-moz-document url(http://lodoconversations.com/), domain(backupmoxie.com) {
 color:red;
}

Why is this useful?

Some sites are just ugly, but a more common case is fixing printable output.  Use the @media rule to specify a list of items that should be hidden, or have more print-friendly colors.  You could also hide all advertising blocks or remove the underlining from links.

Another option for per-site custom CSS is to use the Stylish extension which can be thought of as Greasemonkey for CSS.