css class

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 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):

This paragraph has red text.
This paragraph has dark gray text.
This paragraph also has dark gray text.

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

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 class="alcohol">Spirits
<li class="mixer">Cola
<li class="mixer">Lemonade
<li class="hot">Tea
<li class="hot">Coffee
</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.

css class

Applying Classes

Combining IDs with Multiple Classes

Other Links :