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

When you moved the styles from the home page to the external style sheet, the inter-
nal styles were automatically deleted from within that page and the page was connected
to the style sheet, and the page now gets its formatting from the external style sheet.

Creating a Style in an External Style Sheet
You can add new styles to an external style sheet at any time. The process of creating a
style in an external style sheet is exactly the same as the process of creating a style in an
internal style sheet. The only difference is that you choose the style sheet by name in the
Rule Defi nition list when you create the new style.

Defining a Style in an External Style Sheet
• In the CSS Styles panel, click the New CSS Rule button.
• Click the Selector Type button, and then click the appropriate style selector type.
• Click in the Selector Name box, and then type a name for the new style.
• Click the Rule Definition button, and then select the style sheet name from the list.
Click the OK button.
• In the Category box, click a category, and then set the option you want. Repeat until
the style includes all the options you want.
• Click the OK button.

You need to create a style that will justify the navigation text at the right side of each
page. Because this style will be used only once in each page of the NextBest Fest site,
you'll create a new ID style defi ned in the nbf_styles.css external style sheet. When you
add a new style to the style sheet, the style sheet opens in the Document window. You
must save the style sheet to save the new style.

To define the nav style in the external style sheet:

◗

1. On the Document toolbar, click the Design button to switch to Design view, and
then, in the Document window, select the navigation text.

◗

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

dialog box opens.
Trouble? If the buttons in the CSS Styles panel are not active, scroll to the top of
the All Rules pane, click <style>, and then repeat Step 1.

◗

3. Click the Selector Type button, and then click ID . You'll create an ID style for the
navigation system.

◗

4. In the Selector Name box, type #nav . The new ID style will be named nav.
◗

5. Click the Rule Definition button, and then click nbf_styles.css . The ID style will
be saved in the external style sheet.

◗

6. Click the OK button. The CSS Rule definition for #nav in nbf_styles.css dialog
box opens.

◗

7. In the Category box, click Box , and then, in the Float list, click right .
◗

8. Click the OK button. The style is added to the style sheet.
◗

9. If necessary, next to the style sheet name, click the Plus (+) button to view the
styles. The #nav style appears in the All Rules pane of the CSS Styles panel as well as
in the ID list in the HTML pane of the Property inspector. The nbf_styles.css page tab