Lesson 2

Create, Apply, and Edit Cascading Style Sheets

OBJECTIVE:

In this lesson, you will create a Cascading Style Sheet file for The Striped Umbrella website.  You will also create a rule named bold_blue and apply it to text on the spa page.

Sample Solution

Lesson:  Create a Cascading Style Sheet and a rule

  1. Click the CSS button in the Property inspector to switch to the CSS Property inspector - from this point forward, we will use CSS rather thatn HTML tags to format most text
  2. Click Window on the Application bar, then click CSS Styles to open the CSS Styles panel
  3. Click the Switch to All (Document) Mode button, click the New CSS Rule button in the CSS Styles panel to open the New CSS Rule dialog box, verify that Class (can apply to any HTML element) is selected under Selector Type, then type bold_blue in the Selector Name text box
    [TIP:  Class names are preceded by a period - if you don’t enter a period when you type the name, Dreamweaver will add the period for you]
  4. Click the Rule Definition list arrow, click (New Style Sheet File), then click OK
  5. Type su_styles in the File name text box, then click Save to open the CSS Rule Definition for .bold_blue in su_styles.css dialog box - the .bold_blue rule will be stored within the su_styles.css file
  6. Verify that type is selected in the Category list, set the Font-family to Arial, Helvetica, sans-serif, set the Font-size to 12 px, set the Font-weight to bold, set the Font-style to normal, set the Color to #006, then click OK
    [TIP:  You can modify the font combinations in the Font-family list by clicking Format on the Application bar, pointing to Font, then clicking Edit Font List]
  7. Click the plus sign next to su_styles.css in the CSS Styles panel and expand the panel to list the bold_blue style, then select the bold_blue style - the CSS rule named .bold_blue and the properties appear in the CSS Styles panel

Summary:  You created a Cascading Style Sheet file named su_styles.css and a rule called .bold_blue.

 

Lesson:  Apply a rule in a Cascading Style Sheet

  1. Click View on the Application bar, point to Toolbars, then click Style Rendering
    [TIP:  You can also right-click on an empty area on as open toolbar to see the displayed and hidden toolbars - the displayed toolbars have a check next to them - to display or hide a toolbar, click it]
  2. Verify that the Toggle Displaying of CSS Styles button on the Style Rendering toolbar is active
    [TIP:  You can determine if the Toggle Displaying of CSS Styles button is active if it has an outline around the button - as long as this button is active, you do not have to display the toolbar on the screen - you use the Toggle Displaying of CSS Styles button to see how styles affect your page - if it is not active, you will not see the effects of your styles]
  3. Select the text “Revitalizing Facial,” click the Targeted Rule text box in the Property inspector, then click bold_blue
  4. Repeat Step 3 to apply the bold_blue style to each of the spa services bulleted items in the unordered lists

Summary:  You applied the bold_blue style to each item in the Spa Services category lists.

 

Lesson:  Edit a rule in a Cascading Style Sheet

  1. Click .bold_blue in the CSS Styles panel - the rule’s properties and values appear in the Properties pane, the bottom part of the CSS Styles pane
    [TIP:  Click the plus sign to the left of su_styles.css in the CSS Styles panel if you do not see .bold_blue - click the plus sign to the left of if you do not see su_styles.css]</li> <li>Click 12px in the CSS Styles panel, click the font-size list arrow, click 14 - all of the text to which you applied the bold bold_blue style is larger, reflecting the changes you made to the bold_blue rule - you can also click the Edit Rule button in the CSS Styles panel to open the CSS Rule Definition for.bold_blue dialog box<br />[TIP:  If you position the insertion point in text that has a CSS rule applied to it, that rule applied to it, that rule is displayed in the Targeted Rule text box in the Property inspector]</li> <li>Use the File, Save All command to save the spa page and the style sheet file</li> <li>Hide the style Rendering toolbar</li> </ol> <p>Summary:  You edited the bold_blue style to change the font sixe to 14 pixels. You then viewed the results of the edited rule in the unordered list.</p> <p> </p> <p><strong>Lesson:  View Code with the Code Navigator</strong></p> <ol> <li>Point to the text “Revitalizing Facial” and hover until the Click indicator to bring up the Code Navigator icon is displayed</li> <li>Click the Click indicator to bring up the Code Navigator icon - a window opens, with the name of the style sheet that is linked to this page (su_styles.css) and the name of the rule in the style sheet that has been applied to this text (bold_blue)</li> <li>Position your cursor over the bold_blue rele name to see the properties of the rule displayed</li> </ol> <p>Summary:  You displayed the code Navigator to view the properties of the bold-blue rule.</p> <p> </p> <p><strong>Lesson:  Use the Code Navigator to edit a rule</strong></p> <ol> <li>Click .bold_blue in the Code Navigator - the document window is split into two sections - the top section displays the code for the  CSs file and the bottom section displays the page in Design view</li> <li>Type directly in the code to replace the color “006” with the color “306”</li> <li>Save all files - the font color has changed in Design view to reflect the new shade of blue in the rule<br />[TIP:  You can also edit the rule properties in the CSS Styles panel]</li> <li>Click the Show Design view button</li> </ol> <p>Summary:  You changed the color property in the .bold_blue rule.</p> <p> </p> <p> </p></body>