How to permanently add CSS to some pages using Firefox?

Question

How to permanently add CSS to some pages using Firefox?

Say, I want to change the font or background of a page I frequent using Firefox.

How to do that?

Answer 1

There's a great extension called Stylish that does exactly what you're looking for. It allows you to add custom CSS to the pages you visit.

Answer 2

https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/

Answer 3

You can add custom CSS rules to a chrome/userContent.css file in your Firefox profile folder.

• Open your profile folder
• Create the "chrome" directory if it doesn't exist
• Create the "chrome/userContent.css" file

Example:

/* For any page */
body { margin: 10px; border: 1px solid red !important; }

/* Or only for google.com */
@-moz-document domain(google.com) {
    body { margin: 10px; border: 1px solid red !important; }
}

Answer 4

You can still use chrome/userContent.css in your profile folder but as of Firefox 69 and newer, you have to manually set toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config to work.