UNIT 3 > MODULE 1

Lesson 2: Applying Styles

Overview

In the previous lesson you learned the basic anatomy of a CSS style, and applied this knowledge by stylizing the h1 tag in your portfolio home page. In the current lesson, you will learn more about CSS and will apply style to your entire web page.

Learner Outcomes

At the completion of this exercise:

Activities

  1. Visit csszengarden.com to see the creative potential of CSS.
  2. Open your portfolio's index.htm file with your text editor.
  3. For each tag ("selector" when CSS is applied) contained within the body of your document, apply at least two properties. Follow these guidelines:
    • Use the Web Design Group CSS Properties website for an organized list of available properties.
    • Additional resources are listed in the Resources section below
    • One of the properties you may define for most elements is color. Use a consistent color scheme. Remember you can use a web based tool for that task such as the Wellstyled Color Scheme Generator or the VisiBone Webmaster's Color Lab.
    • Whenever you have the choice between absolute or relative values choose relative values.
    • Save and check your work often.
    • Experiment with different styles to see how they effect your document. Have fun!

Handouts/Online documents

All done?

After you have saved the changes to index.htm, open the file in your browser. Refresh your browser and study each of the changes. Show your instructor your results before starting Lesson 3.