Creating Spry Elements and Alternate Style Sheets - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 450

Figure 8-10 Accordion widget with new width and height

widget dimension s
are smaller

change the height
property

◗

7. On the Related Files toolbar, click the SpryAccordion.css button, and then save
the style sheet. You don't need to save the contact.html page because all the
changes you made were in the style sheet.

You can customize the aesthetic look of a widget either by adjusting the CSS rules
that affect the aesthetic display of the widget or by creating and applying new styles
to different elements of the widget. The rules in the SpryAccordion.css page are anno-
tated to provide information about what elements each rule affects. You will review the
SpryAccordion.css page, and then continue to customize the Accordion widget.

To modify rules in the SpryAccordion.css style sheet:

◗

1. If necessary, switch to Code view. The code for the SpryAccordion.css page is
color-coded. Each rule is pink and its corresponding properties are blue. Notes
describing each rule appear above the rule in gray.

◗

2. Scroll to the top of the page, if necessary, and read the gray notes above the
.Accordion rule.

◗

3. In the Document window, click the .Accordion rule. In the CSS Styles panel, the
rule is selected in the All Rules pane and its properties appear in the Properties
pane. See Figure 8-11.