How do class selectors work in CSS?

A class selector starts with a dot (.highlight) and styles every element carrying that class in its class attribute — making it the reusable workhorse of CSS.

The idea is to attach a reusable label to elements and style by that label, rather than by tag type. You add a class="..." attribute in the HTML and a matching .name rule in the CSS:

.highlight {
    background-color: yellow;
}
.error {
    color: red;
    font-weight: bold;
}

<p class="highlight">Highlighted text</p>
<p class="error">Error message</p>

Why classes are so central:

• Reusable — the same class can dress any number of elements of any tag type. A <h1> and a <p> can both wear class="absatz".
• Multiple per element — list several class names separated by spaces, and every matching rule applies:

<p class="highlight error">Gets both the yellow background and the red bold text</p>

• Case-sensitive — .Error and .error are different classes.

A class selector's specificity (0,1,0) sits above element selectors but below ids, which is exactly why classes are the recommended default for almost all styling.