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

◗

4. Click the OK button. The changes you made to the styles are accepted.
You must save the external style sheet to save the style changes you made.

◗

5. On the Dynamic Related Files toolbar, click the nbf_styles.css button, and then
save the style sheet.

◗

6. On the Document toolbar, click the Design button to return to the home page,
and then save the home page.

When an edited style is
in an internal style sheet,
you must save the page
to save the changes to
the style.

◗

7. Preview the home page in a browser, and then close the browser.

Editing Styles in the Properties Pane of the CSS Styles Panel
The CSS Styles panel is another tool that you can use to examine and edit CSS styles.
When you select a page element in the Document window and click the Current but-
ton in the CSS Styles panel, the panel changes from All mode to Current mode and three
panes display information about styles and properties for the selected page element.
Because styles are inherited and cascading, several rules might contribute to the format-
ting of any particular element.
The Summary for Selection pane lists the properties for all rules that affect the format-
ting of the selected element. Properties are listed in hierarchical order; properties that are
closer to the text appear at the bottom of the list. This is useful because styles sometimes
inherit properties from higher-level styles, and when a property value is set in more than
one style, the value located in the style closest to the element will override the value
of the higher-level style. Viewing the properties in a hierarchical list enables you to see
exactly which property takes precedence.
The middle pane switches between About and Rules. The About pane specifi es which
rule or cascade of rules affects the property selected in the Summary for Selection pane
as well as the style sheet fi le in which that rule is saved. The Rules pane shows the cas-
cade or hierarchy of all the rules that affect the selected element.
The Properties pane enables you to edit CSS properties for the rule in which the
property selected in the Summary for Selection pane is defi ned or for the rule selected
in the About or Rules pane. You can show only those properties that are set; you can
display the properties in alphabetical order, or you can display the properties by category
(such as font, background, and so on). Properties that have values are displayed in blue
at the top of the list. When a property in another rule overrides the same property in the
selected rule, the property in the selected rule has a red line through it. Property names
are displayed in the left column, and values are displayed in the right column. You can
change or add values by typing in the value column or by selecting a value from a list.
Any changes you make in the Properties pane are immediately applied to the page, so
you can see how that property affects the design. You must save the page and any rel-
evant style sheets to save the changes.
Gage wants you to remove the default bold from the h1 and h2 styles so that the styles
more closely match the site plan. You will use the Properties pane in the CSS Styles panel
to make the changes.

To edit the h1 and h2 styles using the Properties pane in the CSS
Styles panel:

◗

1. Collapse the Files panel group , and then, in the CSS Styles panel, click the
Current button. The CSS Styles panel changes to Current Selection mode and dis-
plays the Summary for Selection pane, the About pane, and the Properties pane.