How to customize Firefox with CSS.
Getting Started

Firefox supports advanced customization of its UI with user-defined CSS. This allows virtually unlimited customization of the style of the browser, as well as some very limited functionality customization.

You can define these rules in two files: userChrome.css and userContent.css.

userChrome.css affects the browser's chrome (a general term for a UI). This includes things like the address bar and tabs, as well as the menus (even the context menu).

userContent.css affects the browser's content, e.g, web content as well as Firefox built-in pages (about: pages) and also extension content. About pages include things like the new tab page (about:newtab), the options page (about:preferences), addons page (about:addons), and so on. You can see a complete list of about: pages at about:about.
Setup
1. Enable userChrome customization in about:config

   Navigate to about:config via the address bar and click the 'Accept the Risk and Continue' button if it appears.

   Search for toolkit.legacyUserProfileCustomizations.stylesheets and toggle it to true by double-clicking it.

For a visual walk-through Watch Me Do or Youtube.
2. Locate and open your profile folder:

   Go to FF menu ➝ Help ➝ 'More Troubleshooting Information' or navigate to about:support in your address bar.

   Note: for Thunderbird, the menu choice is TB menu > Help > Troubleshooting Information.

   for Windows, under Application Basics click the 'Open Folder' button next to 'Profile folder'.

   for MacOS, under Application Basics click the 'Show in Finder' button' and click the highlighted profile folder.

   for *nix, near the bottom of Application Basics, click 'Profiles' > about:profiles. For the profile in use, click the 'Open Directory' button for the Root Directory

You should now see your profile folder open in your file manager.
3. Create the folder and its files

   Inside your profile folder, create a new folder named chrome (case-insensitve). The chrome folder should end up in a folder that includes files like prefs.js and places.sqlite.

   Inside the chrome folder, create two new files: userChrome.css and userContent.css (case sensitive).

   Note: In Windows, before creating those files you must make sure the 'Hide extensions for known file types' setting in File Explorer is disabled. If this is not done, your files will end with .txt. You won't be able to notice that, and your code won't work. To make the change, click the meatball (...) menu on the File Explorer toolbar ➝ Options ➝ 'View' tab ➝ uncheck 'Hide extensions for known file types' ➝ Apply ➝ OK.

4. Add some content to the file and make sure to save it as a plain text file with no rich text formatting.

For example:
.tab-background[selected] {
 border: 1px solid !important;
 border-color: black !important;
}

.tab-background[selected] {
 background: lightblue !important;
}