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

◗

5. In the All Rules pane of the Insert panel, select the h2 rule and drag it below the
h1 rule at the bottom of the list, if necessary, then drag the .sub2 rule below the
h2 rule. The code for the rules is rearranged as well.

◗

6. Save the page.

Using External Style Sheets
Locating all of the styles for a Web site in one place is one of the greatest advantages of
using CSS styles. An external style sheet enables you to separate the style of the Web site
from the content of the Web site, enabling you to make stylistic changes throughout the
site by updating a single fi le. So far, you created and used styles within one document, or
page, in the NextBest Fest site. To use these styles throughout a site, they must be located
in an external style sheet, a fi le that contains the CSS styles defi ned for a Web site. A site
can have as many external style sheets as you want, but it is usually simpler to incorporate
all styles into one external style sheet. An exception to this guideline is when you use style
sheets to create different layouts for the content of pages. For example, you might create a
separate print style sheet to structure the site content so that the user can more easily print
information from the site. You can either create a style in an external style sheet or you
can move the styles you created within a Web page to an external style sheet.

An external style sheet has
the file extension .css.

Moving Styles to an External Style Sheet
If you have already created styles in a specifi c document or page, you can move one
or all of those styles to an external style sheet rather than re-create them. This lets you
use those styles throughout the Web site. To keep the fi les in a Web site organized, you
should create a folder in the local root folder of the Web site, such as a folder named
“stylesheets,” and then save the external style sheet fi le with a descriptive name, such as
“nbf_styles,” within that folder. To move CSS styles to an external style sheet, the Web
page where the styles are currently located must be open.

Moving Styles to a New External Style Sheet
• Open the Web page whose styles you want to move.
• In the CSS Styles panel, select the styles to move, right-click the selected styles, and
then click Move CSS Rules.
• Click the A new style sheet option button, and then click the OK button.
• Navigate to the stylesheets folder in the local root folder.
• In the File name box, type a name for the style sheet.
• Click the Save button.

You want to use the styles you created for the home page in all of the other pages
in the NextBest Fest site. You'll move those styles to an external style sheet that you'll
store in a new folder named “stylesheets” in the local root folder. When you move
the styles from the home page, all of the styles from the page, including the styles that
Dreamweaver created when you set the page properties, are moved to the external style
sheet. In this case, you will create the style sheet when you export the styles from the
home page.