How to customize Firefox's GUI using CSS?

Question

The Firefox extension Stylish enables customization of a site's CSS. I'd like to use the same extension to make some tweaks to the Firefox GUI. How can I do this?

Answer 1

1. Go to this url: chrome://browser/content/browser.xul This loads a page filled with Firefox GUI elements.
2. Open Tools-> Web Developer-> Inspector.
3. Inspect the element(s) you want to customize. This then lets you get the IDs and classes of the various elements.
4. Create a Stylish style that modifies those elements.