Resources for Style Recipes and Tools

Updated October 30, 2022; Originally posted by jscher2000 on November 5, 2017

You probably have a user interface tweak in mind if you are on this site. If you need help with the CSS rules, there are a variety of resources on the web to assist. You might also be interested in a decent text editor that helps you out with autocomplete and syntax coloring (applying different colors to the different parts of style rules: selectors, properties, and values). Hopefully these links will help.

Helpful Websites

Style Recipe Sites

I've collected these into another page here: Where to Find Style Recipes.

Learning CSS

The web has an abundance of resources; the hard part is where to start. I find that working with rules created by others, hopefully with helpful comments embedded, provides a great starting point. Then you can look up the style properties to get a better idea of what the rules do. MDN is a fantastic resource: CSS.

Tools

Firefox has a built-in style editor, in the Browser Toolbox. But you may find it easier to work in an external text editor much of the time, reserving the Browser Toolbox for minor adjustments (since it allows a more or less real time preview of your adjustments to your rules). I've embedded a video demonstrating the editors and Browser Toolbar on this page: Adding Style Recipes to userChrome.css.

Text Editors

On Windows, the Wordpad app makes a decent text editor, but it doesn't really help you out in any way. There are many free and non-free text editors that make working with CSS much easier. The following are open source editors that are being kept up-to-date:

The Browser Toolbox

There is a detailed MDN page for this tool: Firefox Developer Tools: Browser Toolbox.

Topics

I'll be adding more pages here, time permitting. For now, one of these may be helpful: