CSS Lesson 3 CSS Classes by ntz11397


									                              CSS Lesson 3: CSS Classes

CSS lets you break up a selector into several pieces… each with its own values (like
black or red). Here’s what I mean:

Let’s say you want all your paragraphs text to be black except for a few, special
paragraphs. You do that by adding a class definition to a selector. Below the body text
is black, but the special paragraph (defined as “alert”) is in red:

p.bodytext {color: black;}
p.alert {color: red;}

Dividing code by using periods to separate class from property is a common practice in
many programming languages.

You can call the class anything you want, such as p.special or p.emphasis. But you must
refer to that in your html document, like p class “special” or p class “emphasis”.

Programmers will pick a name for a class after what it does rather than how it looks. So
in this example, we use p.bodytext instead of p.black and p.alert instead of p.red,
especially since the word “red” or “black” may appear elsewhere in the html code. It is
programming practice to refer to classes by the behavior it is intended for (such as
alerting somebody), rather than the value.

After you defined your members of the p selector class, you can refer to them in your
html document, like this:

<p class=”bodytext”>
This one is black.
<p class=”alert”>
This one is red.

Practice #1: Using the code given above, create .css & .htm documents that results
in this result:

This one is black.
This one is red.

Remember you need to link your .htm document to your .css document by using this tag
inside the header <head></head> of your html document:
         <link type="text/css" rel="stylesheet" href="YourFile’sName.css">
Practice #2:

Create .css and .htm that gives the following result (black text and red text, using

There are a variety of clubs that students can join on campus. The majority of the clubs
meet at lunchtime. Students can learn about the clubs during Club Day on September 14.

There are several Winter athletic teams students can join, including Wrestling, Girls
Soccer, Boys Soccer, Boys Basketball and Girls Basketball. Visit the school’s website at
to view Fall and Winter sports.

Of course, there are opportunities to study during the summer. Most notable is Summer
School. However, many high school students prefer to spend their summers working
part-time jobs or at special camps, like music camp.

Mr. Miller will check both assignments for a grade. You do not need to upload them go
Geocities or Bravenet.

To top