What Is a User Style Sheet?

In the past, the internet was filled with bad web design, unreadable fonts, colors that clashed, and nothing adapted to fit the screen size. At that time, web browsers allowed users to write CSS style sheets that the browser used to override the styling choices made by page designers. This user style sheet set the font at a consistent size and set pages to display a specified color background. It was all about consistency and usability.

User Style Sheet Popularity Plummets

Now, however, user style sheets aren't 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. Firefox requires you to enable the option through a developer page. User style sheets vanished because web design is better.

If you still want to experiment with user style sheets, you can, but it's not recommended. You're more likely to break the pages you visit or make them really ugly.

Enable User Style Sheets in Firefox

To get started with user style sheets in Firefox, enable them. It only takes a few seconds, but the option is buried in the Firefox config page.

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

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

3. The next page you'll see is just a search bar. Type toolkit.legacyUserProfileCustomizations.stylesheets into the search.

4. There should only be one result. Double-click it to set the value to true.

5. Close Firefox.

Create the Firefox User Style Sheet

Now that Firefox will accept your style sheet, you can create one. The file is no different than any other CSS. It resides in a folder within your browser's user profile directory.

1. Locate the Firefox 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, there's 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's the profile folder you need.

   Read More

   Get to Know Cascading Style Sheets With This CSS Cheat Sheet

   By Jennifer Kyrnin

3. Create a new folder inside the profile one and name it 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 anything in this file, as long as it's valid CSS. To illustrate a point, make all websites look ridiculous. Set the background color to bright pink:

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

   The !important at the end is important. Usually, using !important in 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'll need it for every rule you create.

6. Change the font sizes.

   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. Open Firefox and navigate to a page to try it out. If you set the rules used in this example, the site should look bad.

Use Chrome Extensions With Google Chrome

Google Chrome doesn't support user style sheets and never has. Chrome isn't 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 the browser.

However, there are Chrome extensions that allow you to implement user style sheets to customize your browsing experience. This guide uses the extension Stylish to enable user style sheets in Chrome.

1. Open Chrome.

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

3. In the Chrome extension tab, select the three-stacked-line menu icon in the upper-left corner of the screen. A new menu slides out. Choose Open Chrome Web Store on the bottom.

4. In the Chrome Web Store, use the search to look for Stylish.

5. Stylish should be the first extension in the results. Select it.

6. On the page for Stylish, select Add to Chrome.

7. A pop-up appears asking you to confirm adding Stylish. Select Add extension.

8. Chrome shows a page letting you know Stylish is installed. From there, you can go to any page or close the tab.

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

10. A new Stylish menu opens. Select the three-stacked-dot menu icon in the upper-right corner.

11. From the resulting menu, select Create New Style.

12. Chrome opens a new tab for your style. Use the field in the upper-left corner to give it a name.

13. 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 the rules override the site's existing style.

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

14. Select Save on the left to save your new style. You should see it applied immediately.

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