Now we want to stylize elements on our site. Let's say that we want to change the "Welcome" greeting to brown and to a different font.

1. The styling for page elements are in CSS rules in an external stylesheet found at ...

includes/templates/example/css/stylesheet.css

where example is the name of your template.

2. Now we need to figure out which CSS rule in that file to alter to affect the changes we want. I recommend installing Firebug plugin in your Firefox browser so that you can use the "inspect" feature as shown here...

Here you see that our "Welcome" greeting is an h1 tag. This h1 is being stylized by the h1 rule on line 39 of the stylesheet.css file. If you hover your mouse over the color code #9A9a9a, you will indeed see that it is gray -- which indicates you got the correct rule.

Alternatively, you can do "View -> Source" and paste into Dreamweaver and examine the code that way as demonstrate in previous tutorial to figure the same thing out.

3. Now lets change that #9A9A9A gray to a #CC6600 brown.

And while we are at it, we also added a rule to specify a Courier font for our Welcome greeting.

4. Now our page looks like...

5. You see that are "Welcome" greeting has changed to brown and to Courier font. However, cur CSS rule change affected all "h1" tags including the "Sales Message". If this is what you want, then it fine.

6. However, if you only want to change the "Welcome" message and not the "Sales Message", then we have to apply the brown color and Courier font to a more specify CSS rule. Looking back up on our screen shot of the Firebug's inspection, we see that we only want to apply the brown and Courier to h1's with id of "indexDefaultHeading".

7. Looking though the stylesheet.css file, we don't see such a rule. So we will have to create one. But first, we reverted back our previous change. Then we added the new more specific rule as shown.

8. Now our brown and Courier only affects the "Welcome" greeting and not the Sales message.

9. If you click through to your EZPages, you see that the brown and Courier had not allied to those headings. If you want to apply to those headings as well, we inspect that header element that is on the EZPage and add the appropriate rule as shown...

10. Applying the same techniques, you can find out what rules to change to style the other elements of the site. For example, if you want to change the color of the page, you would discover that it would be in the "#mainWrapper" CSS rule.