Class Selector

What if you want to style some paragraphs differently from others? That is where class selectors come in.

A class selector targets elements that have a specific class attribute. In CSS, you write a dot . followed by the class name.

.highlight {
  background-color: yellow;
  padding: 10px;
  font-weight: bold;
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

In your HTML, you add the class to any element you want to style.

<p class="highlight">This paragraph gets the highlight styles.</p>
<div class="card">This div gets the card styles.</div>

Multiple Classes

An element can have more than one class. Just separate them with spaces in the HTML.

<p class="highlight big-text">This has two classes.</p>

.highlight {
  background-color: yellow;
}

.big-text {
  font-size: 24px;
}

The element gets styles from both classes. This is incredibly useful for reusing and combining styles.

Classes Are Reusable

Unlike IDs, you can use the same class on as many elements as you want. That is the whole point — create a style once and reuse it everywhere.