Firefox addons for working with CSS

This topic comes up frequently, what is the best way to edit CSS?

I have posted a comment on d.o. with comments and links for using Firebug in conjunction with Web Developer.

IMO, the two addons together make short work of fine-tuning CSS (for Firefox, of course... you may need to adjust your styles for IE etc).

Firebug will tell you the css filename and line number for an element. Use Inspect, click on the element in question, look in the right pane for all inherited styles and their source filenames.

Pay attention to the inheritances. If a style has been defined with div.classname and later also with p#idname, just resetting p#idname may not change anything, you may need to redefine the full inheritance path of specified styles: div.classname p#idname

Some people find it handy to edit the css right there in the Firebug css pane, but there are limits, I don't think you can add new style defs, just edit the properties of existing ones.

So I use Web Developer in conjunction - with Edit CSS you can select a file and edit it, view the results WYSIWYG, then save the file.

[edit]

Creating and including a custom stylesheet:

I have started putting my custom styles in a separate stylesheet, for easier editing and better separation.

Here is a Drupal book page about adding the custom stylesheet to your theme by editing the .info file. Basically, you need to add this line under the theme's style.css:

stylesheets[all][] = customfilename.css

I also recommend changing the name: and description: and the .info filename (eg mynewstyle.info) to differentiate your customized theme from the original (and the screenshot, too, if you want)

As stated above, I generally append my custom styles to the end of the theme's style.css file so that my styles are preserved when upgrading individual modules, and easy to transfer when changing or upgrading your theme.

(yes, this will work even if the style is defined in another stylesheet, as long as the style.css file is loaded AFTER the other stylesheet, and it is usually the last css file loaded...)