How do I locate the right block to inject new CSS rules?

This FAQ assumes you have Firebug installed. You may use any developer tool which lets you inspect code.

Launch Firebug – your screen will look like this.

Be sure that HTML is selected so you can see the html code of your document. Then click the Element Inspector button. This allows you to roll your mouse over elements on your page. As you do this, each HTML element is outlined in blue on your screen and in the code listing. The code listing also shows CSS classes which have been applied.

Note: Move your mouse slowly so you don’t miss any elements.

Notice the blue line around the Site Slogan. A slogan has been added to this site. Also notice the highlighted text in the code listing. You can expand and contract the code to see more or less, by clicking on the + or - sign.

The CSS rule you create with the CSS injector may target an id or class or an element within an id or class. Remember that if you target the a tag, for example, you’ll want to use the parent id in the selector or your rule will apply to every anchor tag on your site, e.g., #site-name a {color: black}.

You may need to experiment by creating and modifying rules until you find the correct target.  The key here is to be careful with scoping your rule to the proper selector. It's not always obvious how to do that and may take some trial and error even for people experienced with HTML.

Note: You might want to write the id or class name or copy and paste the information. Firebug may not be visible when you create the rule. You could make a quick reference list of all the id and class styles you target.