When To Use And Not to Use a Class

When to Use a Class
As described previously, classes are a very flexible method for applying your CSS rules, and can
be used again and again within a page. Use classes to control elements that belong to a group,
for temporary items, and also to enhance the behavior of an ID.

When Not to Use a Class
It is not recommended that classes be used for main structural elements within a page, such as
headers and main navigation, although they will work. Doing so would decrease the flexibility
of your design and make further customization difficult without overhaul or extra markup.
Also, be sure a class is needed, and make sure the element cannot be targeted by defining a rule
for the existing (X)HTML before getting class-happy. Remember that a class is used for exceptions
to normal styling, and not to define the standard.

Linking a Class Directly to an Element

In this example, the CSS is constructed with the class attached directly to the element in the
form element.classname, and like before, it is referenced using the class="classname" format
within the (X)HTML.
/* Use this style to turn anything light gray */
.bleached {
color:#CCC;
}
/* Override the color of bleached when it identifies a paragraph */
p.bleached {
color:#000;
}
This method would be used when the standard declaration for the bleached class needs to
be overruled. For example, any element given a class of bleached will remain light gray (color:
#CCC;), but any instances of paragraph elements with a class of bleached will be rendered black
(color: #000;). This method is useful when numerous instances of a class are littering your
(X)HTML, and it would be too difficult to remove them all manually. Instead, simply target that
class when it identifies the element you need to change using the form element.classname.

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;
}