User style sheets

User style sheets are an excellent way of presenting websites in the user's preferred manner. It can be a tricky process depending on your browser, but the results are very effective.

Creating a User Style Sheet

The first thing to is decide what consistent theme you'd like to see for all the sites you visit. Think about what really annoys you about websites in general (like blinking text, or maybe garish fonts), and also what - if anything - do you regularly have difficulty viewing (like certain colours of small fonts).

Next, you have to create your style sheet. If you are proficient - or even a novice - in CSS, then creating a style sheet should be fairly straightforward. If you're not, then either try learning some basics from a website such as W3C Schools, or (an easier option) modify our example file (remember to save the file with a .css extension).

How to apply your User Style Sheet

OK, as you might have guessed there is no standard cross-browser rule for applying your styles. Below are the instructions for adding a style sheet to all the major browsers:

Mozilla Firefox for Mac / Windows
  1. Search your computer for the file userContent-example.css. This will probably be located in C:\ [your user profile name] \Application Data \ Mozilla \ Firefox \ profiles \ [some random numbers].default\ chrome on Windows, or Library / Application Support / Firefox / Profiles / [some random numbers].default on a Mac.
  2. Create your style sheet, name it userContent.css, and add it to the same directory you found userContent-example.css in.
  3. Close and then re-open the browser. Check out those crazy styles!
Internet Explorer for Windows
  1. Go to Explorer and select Preferences.
  2. From the General section, select Accessibility, which should be located in the bottom right of the window.
  3. Select the checkbox that reads Format documents using my style sheet, then browse to your style sheet and click OK, and OK again to exit the tools menu. Once you restart your browser, your style sheet will be picked up by Internet Explorer.
Internet Explorer for Mac
  1. First, get a new browser, as this one is terrible. Try Safari instead.
  2. If you really insist on using IE for Mac, then first select the Tools menu and then Internet Options.
  3. From the Web Browser tab, select Web Content, check the option to Use my style sheet, and then click OK
  4. Restart your old-fashioned browser, and eventually it will re-appear, hopefully displaying your personal styles.
Safari for Mac
  1. From the Safari menu, select Preferences
  2. Click on the Advanced tab
  3. From the Style Sheet dropdown, select Other..., where you can browse to your own .css file.
Safari for Windows
  1. From the Edit menu, select Preferences
  2. Follow steps 2 and 3 for Safari for Mac (above)
Opera for Windows
  1. Go to Tools then Preferences, and then select the Advanced tab.
  2. In the Content menu, choose Style options...
  3. Select My style sheet for both the "author mode" and "user mode" sections, and then browse to your style sheet in the My style sheet field.
  4. Click OK and then restart the browser

Get a Quote

In this section:

Related content:


"CommerceTuned have helped enhance our web visibility by around 27% since we started our SEO/PPC campaign back in June 2006. We got great advice on how to change our website copy to gain the best search engine results and they worked very efficiently with our E-Business team on all the technical coding." Read more...