CSS Classes Practice

Note: the following material is from an older, outdated version of the web design curriculum pack. Please read about the revised and updated version of our Introduction to Web Design Curriculum.

Objectives

At the end of this lesson, you will be able to:

  • Use class selectors to create multiple styles for XHTML elements

Instructions

  1. Create a new folder called CSS_Classes.
  2. Copy all of your files from your Photo Gallery Project into the new CSS_Classes folder. You will use these same files for this assignment.
  3. In your CSS_Classes folder, open the themes.css file with notepad.
  4. Create 6 different classes, which will be used for the headings and paragraphs. Each class must include at least 3 properties. Use the links on the class website to find a list of properties for fonts and text.
  5. Open your index.html file. Each of your 6 classes should be used at least once in your XHTML document. Each heading and paragraph should have a class specified.

Rubric

Component Possible Points Score
Everything from the Photo Gallery is included in the project. 2
The external CSS file contains 6 classes, with at least 3 properties each. 9
Classes have been applied to all headings and paragraphs in index.html 5
The project was submitted on time (20% off for each day late)
Total Score 16

For full projects and source code, download the updated version of our Introduction to Web Design Curriculum.