Adding and Formatting Text - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 139

Gage wants to create a Rumor Has It section on the home page to get some buzz
going about next year's fest. You will add the new subheading to the bottom of the
home page, create a class style named sub2 for the new subheading, and then apply the
custom style to the new heading text. You will use the class style instead of the ID style
because you might need to use this style in the home page again.

To create a class style for the new subheading:

◗

1. In the CSS Styles panel, click the New CSS Rule button . The New CSS Rule

dialog box opens.

◗

2. If necessary, click the Selector Type button, and then click Class (can apply to
any HTML element) .

◗

3. In the Selector Name box, type .sub2 (including the period before the name).
◗

4. Click the Rule Definition button, and then click (This document only) , if neces-
sary. This creates an internal style sheet.

By convention, the name
of a class style always
begins with a period, has
no spaces, and cannot
contain any special
characters.

◗

5. Click the OK button. The CSS Rule definition for .sub2 dialog box opens, and
.sub2 appears in the All Rules pane of the CSS Styles panel.

◗

6. In the Category box, click Type , if necessary.
◗

7. In the Font-size box, type 20 , and then, if necessary, click the Font-size button,
and then click px . The font size for the style is set to 20 pixels.

◗

8. In the Color box, type #ccccff , and then press the Tab key. The specified color
appears in the color picker.
You will change the category so you can add the background color.

◗

9. In the Category box, click Background .
◗

10. In the Background-color box, type #666633 . The background color is set to olive.
◗

11. Click the OK button. In the CSS Styles panel, the name of the new style is
selected in the All Rules pane and its properties appear in the Properties pane.

You must apply the class style to the text you want to format. When you create a
new class or ID style, its name appears in the Class or ID list in the HTML pane of the
Property inspector as well as in the All Rules pane in the CSS Styles panel along with
any HTML tags that you have modifi ed. You apply the style to selected text by selecting
the style from the Style list in the Property inspector. To help you remember what a style
looks like, when possible, each style name in the Property inspector is formatted with the
style's attributes.
You'll type the new heading text, and then apply the .sub2 class style to the heading.

To apply the .sub2 class style to new heading text:

◗

1. In the Document window, position the insertion point after the paragraph text at
the bottom of the home page, and then press the Enter key twice. The insertion
point moves down four lines.

◗

2. Type Rumor Has It , and then press the Shift+Enter keys to insert one line break.
◗

3. Type It looks like amazing things might just come in small packages. It is
possible that Little Kiss might be making the rounds at the next NextBest
Fest. More info coming soon. (Include the periods.)