Lesson 2: Applying ID and Class in CSS

Overview

In the previous lesson you learned about id and class attributes, and added both to the div elements that make up your portfolio home page. In this lesson, you will add styles to your external CSS file that will stylize each these elements.

Learner Outcomes

At the completion of this exercise:

• you will be able to stylize a class of elements using CSS.
• you will be able to stylize an individual HTML element using its ID.

Activities

1. If needed, review the examples in the previous lesson to be sure you understand how to define styles in CSS using ID's, Classes, and descendant selectors.
2. Open your portfolio's external style sheet in a text editor, and your portfolio home page in a browser.
3. Modify your CSS to stylize your page as follows:
   • Control the width of the #skipnav div so that it's no wider than the content it contains (about 10em)
   • Control the width of the .info class of div's so that both div's in this class have width:40%.
   • Increase the font-size of the .info class so its text is larger and more prominent than other text on the page.
   • Change the style of the #overview paragraph so that it stands out, as an overview should.
   • Change the style of the .temp class of paragraphs so that they are italicized (font-style:italic), but no other paragraphs on the page are.
   • Change the color and background-color of the main element so it stands out from surrounding content. Keep in mind what you learned in previous units about color. Since the main content of the page is where most reading takes place, it's especially critical that content inside this div have very good contrast between color and background-color.
   • Add other styles as you see fit until you're satisfied with the appearance of your page. Especially try using some of the styles that you learned in recent lessons about typography and the box model.
   Try doing all of this on your own, playing with CSS. Each time you try something new, save your style sheet, then refresh your home page in the browser to see if your changes had the desired effect. If not, try again. If you can't figure something out, ask your instructor for help.

Handouts/Online Documents

• CSS Reference from W3Schools
• CSS2 Specification via Eric Meyer
• CSS Properties from Web Design Group

All done?

Show your instructor your results before continuing on to the next lesson.