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:

• you will be able to apply CSS to a variety of HTML elements.

Activities

1. Visit csszengarden.com to see the creative potential of CSS.
2. Open your portfolio's index.html file with your text editor.
3. In the previous lesson you added style to the body and h1 elements of your web page. Now, add style to the remaining elements of your page: h2, div, and p. For each of these elements (known in CSS as selectors), apply at least one property, but preferably more than one where it makes sense to do so. Try different styles to see what they do. In later modules within this lesson you'll be learning more about CSS properties related to color, typography, and the box model (margin, padding, and border), plus various other properties. For the current activity, follow these guidelines:
   • Explore the first three websites in the Handouts/Online Documents section below. These reference guides provide organized lists of available CSS properties. Choose the one that you find to be most helpful, and consult that regularly as you're working with CSS.
   • Save and check your work often.
   • Experiment with different styles to see how they effect your document. Have fun!

Handouts/Online Documents

• CSS Reference from W3Schools
• CSS2 Specification via Eric Meyer
• CSS Properties from Web Design Group
• Guide to Cascading Style Sheets from Web Design Group
• CSS Zen Garden

All done?

After you have settled on a style that you like for index.html, save your final changes and show your instructor your results before starting Lesson 3.