Could not find your answer here?: Top of this page.

This document does not cover everything, yet, asking isn't a quicker route to an answer. This document has been written as people asked questions. You can ask questions in the Userstyles.org Forum, of course, but don't be surprised (or offended) if you are linked back to this document.

Don't look for answers. Read the document.

Can I use wildcards in @-moz-document?: Top of this page.

No, you can not use wildcards to do something like this:

@-moz-document url("http://honestlyillustrated.com/userstyles/stylishguide/*.html")

I don't like it either. I wish we could.

The closest you can get is by using:

@-moz-document url-prefix("http://honestlyillustrated.com/userstyles/stylishguide/")

@-moz-document url-prefix("http://honestlyillustrated.com/userstyles/")

Make my style change all pages?: Top of this page.

That's called a "global style".

1. Begin with Click:"Stylish Icon" > Click:"Write Style" > Click:"Blank Style".
2. In "Add Style" window, Click:"Insert" > Click:"HTML Namespace". Because I assume you're asking about website global styles.
3. Write some style rules for whatever HTML tag you want.

If you write something like this:

Click the "!important" button, so it becomes this:

Don't use @-moz-document for global styling.

Replace an image with a local image?: Top of this page.

Read: Local Resources (files) in Firefox's Paths.

Choose the method, chrome://, file:///, or resource://, which makes the most sense to you, and works best for your style's goal.

File paths written as those URI, (as opposed to http://), are ways for Firefox to access files on your disk drive(s).

Style this thing on that page?: Top of this page.

Install:

DOM Inspector

Inspect Context

Web Developer Toolbar

With Web Developer Toolbar: Top of this page.

These images are an example of using Web Developer Toolbar and Stylish, together:

Use "CSS" -> "View Style Information", to activate a tool with a cross-hair cursor, and red border box, which indicates the HTML tag element you are hovering over.

The toolbar has changed to CSS information mode, which shows a "bread crumb trail" through all of the tags which the hovered tag is a "descendent" of.

That was enough information to write the example userstyle.

When that isn't enough information, turn off "View Style Information".

Highlight some text or an image, in the area you are trying to change.

That is, Left-Click, hold it, drag across the text, release left-click. Right-Click (context menu), "View Selection Source".

Firefox will show you this.

Highlight some text in the target container tag, and also some text outside of it, like this.

Usually, you will be given the entire page source, but again, the highlighted part is selected there, too.

With DOM Inspector, Inspect Context, and Web Developer Toolbar: Top of this page.

These images are an example of using Web Developer Toolbar, DOM Inspector, Inspect Context, and Stylish, together:

Use "CSS" -> "View Style Information", to activate a tool with a cross-hair cursor, and red border box, which indicates the HTML tag element you are hovering over.

Take advantage of this to hover the correct page element.

Right-Click.

Chose "Inspect".

DOM Inspector has been opened, with the page element (tag) you were hovering already navigated to and selected.

Now, you can copy Stylish's selector suggestion by Right-Clicking the DOMi line.

I have pasted the selector into Stlyish.

Then, I trimmed the selector down to only the most important part of it.

If you used the entire selector Stylish gave you, the page you are styling will be more likely to break your style, by slightly changing only one part of what you have selected. Also, your style will be huge and slow.

Now, I have finished the selector, and given it the properties I wanted it to have.

For the ratings stars, there were 3 total images. Those same images are used on other pages, too, so I wrote selectors which can catch them all.

Then, I would move these finished CSS Rules into a @-moz-document domain("userstyles.org")

Select one URL and exclude another?: Top of this page.

Not with CSS.

Currently, @-moz-document does not allow complex expressions, such as you would need to exclude a URL that falls in the domain you selected to style.

Greasemonkey is the cure.

I'm working on a script, Greasy Black, which, amongst other things, lets you define domains and URLs in which to add a class name to those pages, and features the often requested domain and URL exclusion not found in @-moz-document.

An example of the script in action, can be seen by pairing it with this userstyle: greasy black - google 2008 ( ALL except GMail ).

Configure the script by adding lines like these:

/* A list of common class names to reuse.
*/
var class_list = new Array();

class_list['default'] = 'greasy-black';

class_list['apacheError'] = 'apacheError';
class_list['google'] = 'bigBroother';
class_list['daytime'] = 'day';
class_list['another'] = 'anotherclassnamehere';

// Domains or URLs that you want to include.
do_class['google.com'] = class_list['google'];
do_class['customize.likethis.etc'] = 'yourclassnamehere';
do_class['anotherone.etc'] = class_list['another'];

// Domains or URLs that you want to exclude.
// No wildcards here.
// For URLs, this behaves just like @-moz-document url-prefix
dont_class['mail.google.com'] = true;
dont_class['http://maps.google.'] = true;
dont_class['butnotthis.anotherone.etc'] = true;
dont_class['http://anotherone.etc/and/not/this/either/'] = true;

What HTML tag does that select?: Top of this page.

td[bgcolor="#000080"]{background-color:green!important}

Selects: <td bgcolor="000080">

Selectoracle says:
Selects any td element with a bgcolor attribute that equals #000080.

Read: Selectors.

Learn: HTML.