Overriding Base Styling with Classes

/* Default styling for paragraphs */
p {
color:#F00;
font-size:12px;
}
/* Use this style to turn anything light gray */
.bleached {
color:#CCC;
}
All paragraphs will still be red by default, but this can still be overridden when necessary
by identifying an element with the bleached class, as in this (X)HTML:
<p>This paragraph has red text.</p>
<p class="bleached">This paragraph has light gray text.</p>
The second paragraph will now be light gray, as the color declaration in bleached overrides
the red. Note that the paragraph is still rendered 12 pixels high, as bleached does not redefine
font-size. Add a font-size declaration in bleached, and that value will override the original
size for all paragraphs identified with class="bleached".

Combining IDs with Multiple Classes

Classes are especially useful when you wish to have control over a number of elements. Consider
the following drinks list, the source code for which is available in the drinks.html file:
<ul id="drinks">
<li class="alcohol">Beer</li>
<li class="alcohol">Spirits</li>
<li class="mixer">Cola</li>
<li class="mixer">Lemonade</li>
<li class="hot">Tea</li>
<li class="hot">Coffee</li>
</ul>
Note first that the unordered list (<ul>) is given a unique ID. Thus, id="drinks" will not be
used again on the page at any time, allowing that particular list to be styled uniquely. Note also
that Beer and Spirits are within list elements defined with class="alcohol", Cola and Lemonade
are within list elements defined with class="mixer", and finally Tea and Coffee are defined in
list elements with class="hot". This allows each drinks group to be treated individually.
The CSS declares that the default text for that list will be red, so any list items without a
class attribute will default to red text:
/* Drinks list styling */
ul#drinks {
color:#F00;
}
Next, the classes for each drink type are defined with unique shades of gray for font color:
/* Define alcohol color */
.alcohol {
color:#333;
}
/* Define mixer color */
.mixer {
color:#999;
}
/* Define hot drinks color */
.hot {
color:#CCC;
}
The result sees the list of items move through shades of gray (defined by the classes).
Any further drinks added to the list can be assigned to a particular drinks group, such as
<li class="alcohol">Wine</li>. Thus a logical color key is established using simple CSS classes.


**■Tip Before adding a class to an element, be sure that the element needs it. Too often web designers
overuse classes when the (X)HTML is already providing more than enough hooks for the CSS. Make sure that
the element cannot be targeted using a descendant selector or other method before opting for a class. This
will help keep your code lean and make future redesigning much easier.

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