Tap the Power of Mozilla's User Style Sheets

by Andrew Wooldridge

You've probably been hearing a lot about "skins" in Mozilla lately. Skins are sets of files that allow you to change the look and feel of the "chrome" in your Mozilla browser. Mozilla uses the same engine to display its UI (buttons, drop-down menus, etc.) that it uses to display web sites like the one you are probably visiting right now.

Mozilla skins use Cascading Style Sheets to define the rules for the appearance of buttons and other UI elements. For instance, you might want your "back" button to be red with a yellow border. In this same way, user style sheets can also control the look and feel of your browser's UI as well as any site you may be visiting. In short, a user style sheet is a CSS file in your user profile that contains style rules controlling how your browser displays visual elements. User style sheets act like an additional layer of style control over your entire browser and can vary depending on which profile you are using for that browser session.

Why does Mozilla have user style sheets?

If you look at this link: (, you'll find a section that talks about a User Agent. This is another way of referring to your browser. CSS specifies that all User Agents should have a default style sheet that displays elements in some routine manner, which can act as a basis for displaying web content.

Related Articles:

Extending the Mozilla Editor

Building a Game in Mozilla

Mozilla takes this concept of a User Agent a step further and allows a style sheet for each profile you use. You could, for example have two different profiles in Mozilla that could result in two very different looking browsers when you sign on. This would be useful, for instance, if you were sharing a computer with someone who is vision impaired or has some degree of color blindness. Your profile could have certain settings, and his or hers could modify the browser easily to accommodate those special needs.

I can hear you asking me, "OK, so what can I do with this?" I hear and obey; so here's the scoop.

Please tell me what cool things I can do with Mozilla style sheets

Before I go into some detail as to how to set up and use user style sheets, I'd like to take a moment and give you some idea as to what they can do. I hope this will give you some incentive to try them out for yourself and take advantage of this powerful, yet virtually unknown feature in Mozilla. User style sheets give you a centralized way to try out new style rules -- without even knowing where in the world that visual element is stored, or even if it's XUL or HTML that is affected. Here are some examples:

  • Force all links on web pages to be underlined, even if the site author styled them differently.
  • Shrink all images to 10X10 pixels until you move your mouse over them (a simple "banner ad filter").
  • Cause Mozilla's drop-down menus to be semi-transparent -- like Apple's OS X.
  • Change the background color of your Mozilla chrome.
  • Test out potential skin changes without having to create a new package/directory/etc.
  • Test out XBL changes without having to edit existing XBL bindings.
  • Share company-wide style information within a work-group (make the browser look similar to everyone in that group).
  • Change the "throbber" based on which web site you are in.
  • Debug your XUL code by creating CSS that outline elements you choose.
  • Create a remote style sheet on a server and inherit it on multiple browsers (using @import).
  • Create your own look and feel for any web site you wish!

These are just a few of the many kinds of things you might want to try out using this new feature. It's really quite amazing to be able -- from a single file (or set of files) -- to control the look and feel of everything about your browsing experience. And if you combine this with XBL (more about that in a later article), the possibilities are endless.

Pages: 1, 2, 3

Next Pagearrow