What Is a User Style Sheet?

Why Should I Use a User Style Sheet?

Imagine an internet where downright terrible web design is more common than not, fonts are nearly unreadable, colors clash, and nothing adapts to fit your screen size. If you're old enough to remember, you know what a massive pain this was, not all that long ago.

At that time, web browsers often included the options for users to write their own CSS style sheets that the browser could use to override many of these questionable styling choices put in place by a page's designers. A user style sheet could set your font at a consistent size or make sure pages only display a white background. It was all about consistency and usability.

Now, however, user style sheets aren't all that common. Google Chrome doesn't allow them, and Firefox is phasing them out. In the case of Chrome, you'll need an extension to create user style sheets, and Firefox requires you to enable the option through a developer page.

So, why have user style sheets mostly vanished? It's simple, really. Web design's gotten a lot better. Of course, if you still want to experiment with your own user style sheets you can, but most of the time, it's not recommended. You're more likely to break the pages you visit or just make them real ugly.

Firefox

To get started with user style sheets in Firefox, you're going to need to enable them. It only takes a few seconds, but the option is buried in Firefox's config page.

  1. Open Firefox, and type about:config into the address bar.

  2. Firefox will take you to a page warning you that going further will allow you to mess up your browser. Press Accept the Risk and Continue to keep going.

    Firefox about:config page
  3. The next page you'll see is just a search bar. Type the following into the search:

    toolkit.legacyUserProfileCustomizations.stylesheets
    
    Firefox about:config search
  4. There should only be one result. Double-click it to set the value to true.

    Firefox enable user style sheets
  5. Close Firefox to get ready for the next part.

Create the Firefox User Style Sheet

Now that Firefox will accept your own style sheet, you can go ahead and create one. The file itself is no different than any other CSS; it just resides in a folder within your browser's user profile directory.

  1. First, you're going to need to locate Firefox's user profile directory. On Windows, you can find it at:

    C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\
    

    On Mac, it's located in:

    Library/Application Support/Firefox/Profiles
    

    On Linux, it's in:

    /home/username/.mozilla/firefox
    
  2. Inside that folder you'll notice at least one folder with a name that's a string of random characters followed by a .default or .default-release extension. Unless you created another one, that'll be the profile folder you're looking for.

  3. It may already be there, but create a new folder inside the profile one called, "chrome."

  4. In the chrome directory, make a file called userContent.css, and open it in the text editor of your choosing.

  5. You can put absolutely anything in this file, as long as it's valid CSS, so to illustrate a point, try making all your websites look ridiculous. Start by setting the background color to a bright pink.

    body, main {
    background-color: #FF00FF !important;
    }

    That !important at the end is, well, important. Usually, using !important in your CSS is a bad idea. It breaks the natural flow of the style sheet, and can make debugging a nightmare. However, it's needed in this case to override the site's existing CSS. You're going to need it for every rule you create.

  6. Next, mess with the font sizes a bit.

    p {
    font-size: 1.25rem !important;
    }
    h1 {
    font-size: 1rem !important;
    }
    h2 {
    font-size: 1.75rem !important;
    }
    h3 {
    font-size: 1.5rem !important;
    }
    p, a, h1, h2, h3, h4 {
    font-family: 'Comic Sans MS', sans-serif !important;
    }
  7. Save, and exit the file.

  8. Now, open up Firefox, and navigate to a page to try it out. If you set the rules used in this example, the site should look pretty bad.

    Firefox user style sheet loaded

Google Chrome

With Google Chrome, things are a bit different. Chrome doesn't support user style sheets by itself and never has. Chrome's simply not built for it. A lot of that comes down it Chrome having more modern origins. The other piece is a difference in philosophy. Firefox has always been built with user control in mind, while Chrome has been more of a commercial product owned and controlled by Google. They really don't care how much control you have over your browser.

That said, there are Chrome extensions that allow you to implement your own user style sheets to customize your browsing experience. This guide is going to use the extension, Stylish, to enable user style sheets in Chrome.

  1. Open up Chrome.

  2. Select the three-stacked-dot menu icon in the upper left of the screen. Navigate to More tools > Extensions.

    Google Chrome menu
  3. The Chrome extension tab will open. Then, press the three-stacked-line menu icon in the upper left of the screen. A new menu will slide out. Choose Open Chrome Web Store on the bottom.

    Google Chrome extension page
  4. The Chrome Web Store will open up. Use the search to look for "Stylish."

    Google Chrome web store
  5. Stylish should be the first extension in your results. Select it.

    Google Chrome web store search results
  6. On the page for Stylish, press Add to Chrome.

    Google Chrome Stylish extension page
  7. A pop-up will appear asking you to confirm adding Stylish. Press Add extension.

    Google Chrome confirm add extension
  8. Chrome will show you a page letting you know Stylish is installed. From there, you can go to any page or close the tab.

    Google Chrome Stylish installed
  9. Select the puzzle piece extensions icon in the upper right of the Chrome window. Choose Stylish from the menu.

    Google Chrome extension menu
  10. A new Stylish menu will open up. Select the three-stacked-dot menu icon in the upper right.

    Google Chrome Stylish menu
  11. From the resulting menu, press Create New Style.

    Google Chrome Stylish options
  12. Chrome will open a new tab for your style. First, use the field in the upper left to give it a name.

  13. Now, create a new rule for your style in the main body of the tab using CSS. Be sure to use !important after each rule to ensure that they override the site's existing style.

    body, main {
    background-color: #FF00FF !important;
    }
  14. Press Save on the left to save your new style. You should see it applied immediately.

    Google Chrome Stylish create new style
  15. Browse to a site to test out your new style sheet. Stylish lets you control your style sheets and apply them selectively to the sites of your choosing. Explore the extensions's controls to get a better feel of how you can take a more fine-tuned approach to your user style sheets.

    Google Chrome Stylish style applied