CSS Class Selector

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.

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


This paragraph has red text.

This paragraph has dark gray text.

This paragraph also has dark gray text.

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