Using Custom Style Sheets With Your Browser

How to use a custom Style Sheet with your browser. This Article includes Firefox, Internet explorer, Opera and Google Chrome.

7750 views

Edited: 2017-12-07 16:41

This Article shows how you can use Custom StyleSheets, to overwrite the CSS styles of the websites that you visit.

Most modern browsers allow you to use a custom StyleSheet – this can be useful for people with disabilities – but there are plugins for some browsers which can make it easier to manage.

User StyleSheets can make use of the CSS !Important rule to overwrite the styles set by the Web designer.

Firefox

If you are using Firefox, then you need to place a file called userContent.css in the chrome directory of your profile.

You can edit the contents of userContent.css as you wish.

On Linux

The location of the profile folder in Linux is:

~/.mozilla/firefox/<profile folder>

The userContent.css file should be placed in the Chrome directory of your profile.

On Windows

If you are using Microsoft Windows, then you can simply open My Computer, and type in the following in the address bar, and hit enter.

%APPDATA%\Mozilla\Firefox\Profiles\

You will then see a directory with the .profile "extension", open this directory, and locate the chrome directory. This is where you are going to place the userContent.css file.

Opera

In Opera open the Menu, select Settings, then Preferences. Inside the Preferences, chose Advanced, then in the left menu chose Content, finally click on the Style Options button, this brings up a dialog which allows you to use your own StyleSheet.

Internet explorer

IE allows you to use your own StyleSheet directly from its accessibility settings.

Click the IE9 tools menu icon in the top right, (or use the Keyboard shortcut: ALT+X). Then open Internet Options, click on the Accessibility button, and chose Format documents using my style sheet.

Then you need to chose a CSS file, using the Browse function.

Google Chrome

The user StyleSheets are located in the User StyleSheets directory, of the user profile.

On Linux

The location of the user profile on Linux, is:

/.config/google-chrome/Default/User StyleSheets

On Windows

The exact location on Windows would be:

%LocalAppData%\Google\Chrome\User Data\Default\User StyleSheets

Type in this address from My Computer or Windows pathfinder, to be taken there directly.

About %LOCALAPPDATA%

%LOCALAPPDATA% is a keyword for your application data directory. These "keywords" refer to actual locations on your hard drive. The reason why we didn't specify the "exact" location, is that system setups may vary. What may be correct for one system, may be something different on another.