• Choose a category
• All
• Classic-Fiction

Questions and answers are all paragraphs, so you can’t simply style the paragraph because you need two distinct styles. There’s more than one question and more than one answer, so the ID trick would be problematic. Two different elements can’t have the same ID — you don’t want to create more than one identical definition. This is where the notion of classes comes into play.

Adding classes to the page

CSS allows you to define classes in your XHTML and make style definitions that are applied across a class. It works like this:

1. Add the class attribute to your XHTML questions.

Unlike ID, several elements can share the same class. All my questions are defined with this variation of the

tag. Setting the class to question indicates these paragraphs will be styled as questions:

What kind of cow lives in the Arctic?

2. Add similar class attributes to the answers by setting the class of the answers to answer:

An Eskimoo!

Now you have two different subclasses of paragraph: question and answer.

3. Create a class style for the questions.

The class style is defined in CSS. Specify a class with the period (.) before the class name. Classes are defined in CSS like this:

Combining classes

Here’s the code for the classes.html page, showing how to use CSS classes:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Favorite jokes

What kind of cow lives in the Arctic?

An Eskimoo!

What goes on top of a dog house?

The woof!

Sometimes you see selectors, like

p.fancy

that include both an element and a class name. This style is applied only to paragraphs with the fancy class attached. Generally, I like classes because they can be applied to all kinds of things, so I usually leave the element name out to make the style as reusable as possible.

One element can use more than one class. Figure 3-5 shows an example of this phenomenon.

Figure 3-5: There’s red, there’s script, and then there’s both.

The paragraphs in Figure 3-5 appear to be in three different styles, but only red and script are defined. The third paragraph uses both classes. Here’s the code:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Multiple Classes

This paragraph uses the red class

This paragraph uses the script class

This paragraph uses both classes

The style sheet introduces