Web Design 35S‎ > ‎CSS‎ > ‎

It's Class Time

Sometimes you need more than one paragraph (or headline, or anchor, etc) style in your document. This is actually pretty easy to do with the use of "classes."

A class simply allows you to define more than one paragraph style. So, for example, you could have a normal paragraph style, plus one to highlight things. p{color:black; font-size: 12px; font-family; verdana, arial, helvetica, sans-serif;} would be for normal paragraphs.

The second paragraph style might be for announcements. It could look like

p.announce{color:red;font-size: 12px; font-family: verdana, arial, helvetica, sans-serif; text-align: center;}

These two paragraph styles would be in your style sheet. In your actual HTML page you would just type <p> for your regular paragraph style. To do the announcement paragraph, you'd start it out with <p class=announce> This would give you two very distinctly different looking paragraphs.

If you're using different classes it becomes really important to end your paragraphs with </p> If you fail to turn off your paragraph style, it might affect the style of later paragraphs, too.

For your assignment,

  • create a stylesheet that has five/5/cinq different paragraph styles.
  • Then create a webpage that uses these five different classes.
  • Your webpage should have at least 100 words of content and two pictures.
James Dykstra,
Jan 10, 2013, 6:57 AM