Skills Review

Sample Solution

 

Create and Use Embedded Styles

  1. Remove the blooms & bulbs website and replace your blooms root folde with the blooms folder from the Chapter 7 Data Files folder on the server
  2. Import the blooms & bulbs.ste file and verify that the root folder and assets folder are linked correctly to your files
  3. Open the plants page
  4. Create a new embedded style that will redefine the horizontal rule tag
  5. In the Type category, set the color to #006; In the Block category, set the Text-align to center; and in the Box category, set the Width to 400 px
  6. Insert a horizontal rule right after the first paragraph ending "hanging baskets"
    [Hint:  If your horizontal rule is not displayed as centered on the page, view it in the browser]
  7. Insert a horizontal rule right after the second paragraph ending "as beautiful"
  8. Insert a horizontal rule right after the third paragraph ending "with cuttings"

 

Modify Embedded Styles

  1. Modify the horizontal rule settings to change the width to 600 px
  2. Save your changes, preview the plants page in your browser; close your browser; close the page

 

Work with External CSS Style Sheets

  1. Open the newsletter page
  2. Use the New CSS Rule dialog box to add the a:link style to the blooms_styles.css file
    Set the Font-family to Arial, Helvetica, sans-serif
    Set the Font-size to 14 pixels
    Set the Font-weight to normal
    Set the Color to #039
  3. Save your changes, then make sure that the text links on the page now appear in a different shade of blue
  4. Use the new CSS Rule dialog box to add the a:hover style to the blooms_styles.css file
    Set the Font-family to Arial, Helvetica, sans-serif
    Set the Font-size to 14 pixels
    Set the Font-weight to bold
    Set the Font-color to #06F
  5. Save your work, then preview the newsletter page in your browser and make sure that the links appear according to the settings you specified
    [Hint:  Visual links will remain a purple color]
  6. Close the browser, then edit the headings style to change the Font-weight to bolder
  7. Close the newsletter page
  8. Save the su_styles.css file

 

Work with Conflicting Styles

  1. Open the index page
  2. Modify the embedded body tag rule to change the Font-family to the Georgia, Times New Roman, Times, serif font
  3. Select the paragraph of text and remove the paragraph_text rule
  4. Reapply the paragraph_text rule and delete the Font-family setting from the body tag
  5. Save the index page

 

Use Coding Tools to View and Edit Styles

  1. Open the plants page, then collapse al of the code for the head content
  2. Expand all code
  3. Convert the horizontal rule on the plants page to an external in the blooms_styles.css file
  4. Save and close all open pages
  5. Post your website to the Hulk server