Exercise 9.3: Linking a cascading style sheet to the Web page

Before you begin, you must complete Exercise 9.2: Working with page properties.

Now you will add a style to the input page. You can use a style that is used in your company or you can use one of the sample style sheets that are provided in the product.

To link a style sheet to an input page:
Page Designer, linking a style to the Web page

  1. Click the Gallery tab, if the Gallery view isn't already displayed.
  2. Click the Style Sheet icon in the Gallery list.
  3. Click the Thumbnails tab in the left bottom stacked view in the workbench.

    You should see thumbnail icons of all the styles available as shown above.

  4. In the thumbnail view, scroll down to the bottom, until you see style sheet denim001.css in the list, or select a style sheet that you like best.
  5. Click the thumbnail picture of denim001.css.
  6. Hold the left mouse button down and drag the mouse cursor to the Page Designer window.

    The cursor will change from this shape , to this shape . When the latter cursor shape appears in the Page Designer window then, let go of the mouse left button.

    After a short while the Style sheet properties will be applied.

  7. Click the Preview tab.

    You will see the colors in the page have changed to the style sheet definitions.
    Index.html page with style properties applied

  8. Click the Design tab to get back to the Design page.

You have added a style to the input page and previewed the new style for the input page and now you are ready to begin Exercise 9.4: Designing and adding a logo.