Using the CSS Styles Panel to Add a New Style

Now that the external style sheet directs the appearance of your file, you need to stay away from the Property inspector. Well, ok… not completely. But you do not want to change color of text with it. Doing so will create a new style, again in the head of the document.

Using the CSS Styles panel to add a new style.

1. Click to the right of the last line on the page, and click Enter/Return to create a new paragraph.
2. Notice that the paragraph is preceded with a brown line (because the new paragraph has assumed the class style of the previous paragraph). With your cursor still in the new paragraph, choose None from the Style pop-up menu in the Property inspector.
3. Type: Bulleted lines should look nice, too.
4. With your cursor still in the same line of text, click the Unordered list button in the Property inspector to set the paragraph as an unordered list.
5. In the CSS Styles panel, click the New CSS Style button.
6. In the New CSS Style dialog box, choose Tag from the Selector Type list, then choose UL from the Tag pop-up menu at the top. Before you click OK, make sure the Define in is set to css_sampler.css. This ensures that the new style code will be written to the external style sheet rather than to the head of the document.
7. Click OK. The CSS Style Definition dialog box will appear.
8. In the Type category, set Style to italic. In the List category, set Type to circle.
9. Click OK.
10. Unlike with earlier versions of Dreamweaver, Dreamweaver MX 2004 opens the external CSS file any time you edit a style in an external style sheet. This exercise is no exception. Notice that css_sampler.css is open and has an asterisk next to the file name indicating that it has been changed and needs to be saved.
11. Save css_sampler.css.
12. The actual bullet will not display differently in Dreamweaver, but you can see a circle in some browsers. The sentence will be italicized.

As you become accustomed to working within the Tag inspector, you may realize you prefer that environment for editing styles. Next, you are going to use the Relevant CSS panel to quickly change the appearance of our existing page.