Specifying Multiple Classes

You have seen how we can apply classes to multiple tags in a document. You can also apply multiple classes to an element. This allows you to combine any number of classes to apply different properties to an element.

The general syntax is shown below:

<tagName class="first second third ...">
  content here ...
</tagName>

Multiple classes can be specified simply by providing more than one class name.

Each class identifier inside the class attribute is separated by a space
You can use as many different classes as you need.
The order in which you specify the different classes is not important; they can be specified in any order.

Let's demonstrate multiple classes with an example.

Example Style sheet

.bolded {
   font-weight: bold;
   }
 
.centered {
   text-align: center;
   }
 
.burnt {
   color: white;
   background-color: #900;
   padding: 1em;
   }

In the style sheet above, we have specified three classes: "bolded", "centered" and "burnt". Note that each class name in the style sheet is preceded by a period to indicate that it is a class.

Example Markup

<p>This paragraph has no class associated with it.</p>
 
<p class="bolded">
  This paragraph has the class "bolded".
</p>
 
<p class="bolded centered">
  This paragraph has the classes "bolded" and
  "centered".
</p>
 
<p class="bolded centered burnt">
  This paragraph has "bolded", "centered" and "burnt".
</p>
 
<p class="burnt centered">
  Use classes when you need multiple instances of a
  rule applied to multiple tags in a document. 
</p>

In the above markup, the first paragraph is rendered with default styles applied to P tags. The second paragraph has a single class, bolded, attached to it. The third paragraph and the last paragraph have different combinations of two classes attached. The fourth paragraph as all three classes attached to it.

Here is the resulting browser rendition:

This paragraph has no class associated with it.

This paragraph has the class "bolded".

This paragraph has the classes "bolded" and "centered".

This paragraph has "bolded", "centered" and "burnt".

Use classes when you need multiple instances of a a rule applied to multiple tags in a document.

So, you've just seen how we can use multiple classes to apply various styles to any element, wherever it is located in the document hierarchy. Now we'll add specificity to the class selector to allow us to target a specific element which has a specified class attached to it.

Selectors, Classes and IDs