Class: Applying Classes in Css

A class can be used an infinite number of times per page, making it a very flexible method of
applying CSS. A class defines an element as belonging to a group, or as a reusable object or
style. Classes solve problems in the short term, but can provide less flexibility for more complicated
CSS designs.

Applying Classes
The most common way to apply a class is to reference it in the (X)HTML using a class="name"
attribute of an element. As with our ID example, the two classes are named highlight (for red
text) and default (for dark gray text):
<p class="highlight">This paragraph has red text.</p>
<p class="default">This paragraph has dark gray text.</p>
<p class="default">This paragraph also has dark gray text.</p>

 Note that as the identifiers are classes, they can be used more than once, hence in the
example two paragraphs have been identified as default, so will be styled the same way. That
would not be acceptable if using IDs.
The corresponding CSS uses a full stop (.) character to denote the rule is a reusable class.
The full stop is combined with the class name to start the rule, followed by the property
declarations:
/* Define highlight class */
.highlight {
color:#F00;
}
/* Define default class */
.default {
color:#333;
}