Adding Class Attributes

One powerful feature of classes is that they can be used on multiple elements at once. By applying the same class to many different elements, we can modify their CSS simultaneously in a stylesheet. Naming a class follows the same constraints as naming an id for a document.

For example, a Web site full of poems might create a special class that is applied to each of the paragraph elements which contain haikus. The designer could then style all of the haikus similarly by using their class selector in a stylesheet. If the designer ever wanted to change the appearance of the haikus later on, it could be done easily, making changes to a single location.

In the document Emme had sent to us, there are some paragraphs containing placeholder text. Let's make these paragraphs share a class name, and style both of them with a single style rule.

Step1. To add the class attribute in the first placeholder paragraph, type the code in bold:

your life experiences and learning process.</p>

<p class="placeholder">Lomo aesthetic retro, PBR&B cardigan sriracha
beard

Exiting code block

The first placeholder paragraph now invokes a class named "placeholder." Let's repeat this for the second placeholder paragraph.

Step2. To add the same class attribute to the second paragraph, type the code in bold:

question that are most important and effective for coaching you...</p>

<p class="placeholder">Hopscotch selfie master cleanse polaroid ethical

Exiting code block

Now, both paragraphs can be referenced using the same class name.

Let's style these paragraphs so they appear different from the more final text Emme wanted us to use.

Using the Class Selector

In a stylesheet, the class selectors are referenced just like id selectors, except that they are preceded by a period.

Let's say we want these paragraphs to visually recede more from the surrounding content. To do this, using the class, a lighter color can be applied to the text in just these paragraphs.

Step1. To create a rule that targets our class attributes, type the code in bold:

.placeholder {
 color: silver;
}

Exiting code block

Now any markup which shares this class name will be displayed using this rule.

Step2. Save and refresh index.html.

You see the placeholder paragraphs have text that is much lighter than the other text on this page.