Lesson 2: Applying Styles


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:


  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 at least five of the HTML elements that appear within the body of your document create a CSS style declaration within the STYLE section of your page. The five elements do not include body and h1, which you've already done. For each of the five elements (known in the STYLE section as "selectors"), apply at least one property, but preferably more than one where it makes sense to do so. Note: By now, the body of your web page should contain the following elements: body, h1, h2, h3, a, hr, p, ul, ol, and li. 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.