Creating Typography Templates - Exercise

Contact Us or call 1-877-932-8228
Creating Typography Templates - Exercise

Creating Typography Templates

Duration: 15 to 25 minutes.

In this exercise, you will create a set of templates to use on websites (Dreamweaver CSS).

If you do not have Adobe Dreamweaver installed, please feel free to use your favorite text editor and browser to alter the HTML code. Dreamweaver is not required, it simply makes the edits a bit faster.

  1. Using Dreamweaver, open build-an-efficient-style-guide/Exercises/amendments.html.
  2. Using the Properties panels and the CSS STYLES panel, create styles to handle all of the text.

Solution:

  1. Using Dreamweaver, open build-an-efficient-style-guide/Exercises/amendments.html.
  2. Select "Amendment I" and use the Properties panel to set a CSS rule.
    1. In the Properties panel, click on CSS and then click Edit Rule.
    2. Choose Tag (redefines an HTML element) from the Selector Type drop-down. Click OK.
    3. Choose the formatting options you want all of the <h1> tags to use. Click OK.
    4. The <h1> tags now have a uniform look.
    5. Repeat steps to create a <p> tag.
    6. We will need to use a class style to create a note area at the top. Create a new rule.
    7. Name the rule ".note".
    8. Set the type options and the border options as well to create a line around the text. Click OK.
    9. Select the note text and use the HTML properties to set the Class to note.
    10. Save and close the file.