Define Custom Appearance Choices in the Form of Class Styles:

1. Click Enter/Return after the last line of text on the sampler page, and type: Some things may need to be a different color.
2. Highlight the words different color.
3. In the Property inspector, click the bold button, and type #336600 in the color text box. Note that the word Style1 has appeared in the Style pop-up menu.
4. With the words still selected, notice that the tag selector in the lower left corner of the design window has highlighted <span.style1>.
5. With the words still selected, switch to Code view and note that the code highlighted is as following: <span class="style1">different color</span>
6. Scroll up to the head region and note the code for the style1 class:

   .style1 {
    font-weight: bold;
    color: #336600;
   }
    

7. Switch back to Design view and choose Rename… from the Style pop-up menu.
8. In the Rename Style dialog box, choose Style1 if not already selected and type: highlight.
9. Click OK and notice that the highlight style has replaced Style1 in the Style pop-up menu. Looking in the code will also indicate that the class has been renamed in the head and in the span tag. You may also see the Results panel appear, indicating the results of what is a successful find and replace function.
10. In Design view, select the words Heading 2 in the third line on the page.
11. With those words selected, choose highlight from the Style pop-up menu in the Property inspector. You have applied the highlight class style to the text otherwise styled as Heading 2.