cascading style sheets tutorial

Class Selectors

Explained

The control over page design that HTML element selectors give you is exciting, but can be heavy handed. Its great to be able to change every paragraph, but what if you only want to change one paragraph, or a few paragraphs? With HTML, you would add the appearance mark up to just the text you want changed. With the style sheet approach that is a no no, so how can we achieve the desired outcome?

Let's think about why you might want a particular paragraph to look different from other paragraphs. It's probably because the content of the paragraph is in some way different from other paragraphs on the page.
Think of a question and answer page. You might have questions in bold, while the answers are in plain text. The appearance of a paragraph is a function of the content of the paragraph.

With cascading style sheets you can create selectors that are associated with a specific type or class of element. In the example above, we would identify two classes of paragraph- question and answer. We would then create two statements in our style sheet, one which affects only paragraphs of class question, and one which only affects paragraphs of class answer.

In short, a class selector selects any element of a given class.

You are probably wondering what I mean by class. We explain that shortly.

Syntax

There are two forms of the class selector.

The first type of class selector selects any kind of element of a particular class (so it will select both paragraphs and tables of that class, as well as any other element with the same class.)

In a style sheet, the form of this type of class selector is simply .class-name, that is a dot followed by the name of the class.
In the Question and Answer example above, we would create two class selectors like this:

.question {font-weight: bold}
.answer {font-weight: 400}

The first of these selectors selects any element on a page with a class of "question". The second selects any element on a page with a class of "answer".

The second type of class selector selects only a specific element of the class- for instance, it will select only paragraphs of that class, not tables or any other element of that class. The form of this type of selector is element.class-name, that is the name of the element, followed by a dot, followed by the name of the class.
In the question and answer example above, we would create paragraph specific class selectors like this:

P.question {font-weight: bold}
P.answer {font-weight: 400}

The first of these selectors only selects paragraphs with a class of "question". It does not select any other kind of element with a class of "question", nor does it select any paragraphs other than those of class "question". The second only selects paragraphs of class "answer", not any other paragraphs, nor any other elements of class "answer".

Use

We saw in the explanation above that we use class selectors to give specific parts of a page a specific appearance.

In a tutorial, your explanations might have a different appearance from procedures.
In a cookbook, a list of ingredients would have a different appearance from the instructions for cooking.

In the first case, we would create class selectors ".explanation" and ".procedure", or if we were to have all explanations and procedures in paragraphs, "p.explanation" and "p.procedure".

For the cookbook, we would have class selectors ".ingredients" and ".instructions". If the ingredients are in a list, we might create a list item class selector, "LI.ingredients".

All that remains is to answer the nagging question, "what do you mean by an element of a given class?" What exactly is a paragraph of class "explanation"? A very good question.

HTML 4.0, the latest W3 recommendation, or HTML standard, introduced a new attribute for HTML elements, the class attribute. The format for this attribute is as follows. In your HTML document, to create a paragraph of class "instruction", you create a paragraph as usual, using the <P></P> tags. In addition, you add the class attribute to the opening tag as you would add any other attribute: <P class="instruction">. Any paragraphs on the page that are marked up in this way will be selected by either of these selectors: P.instruction or .instruction.

Our hands on tutorial has a detailed, step by step lesson on how and why to use class selectors in your web pages.

Class selectors really are one of the most difficult ideas in style sheets to get your head around. If you have made it this far, and have a feel for 1) why they are valuable 2) when they might be used and 3) how to use them (even if the detail escapes you), then you've done well.
If you are still struggling a little, perhaps you should move on without worrying too much, and come back to this section later. You will get it.