Class Selectors

Class selectors are one of the most powerful features of CSS.

They allow you to style specific elements without affecting others.

What Is a Class Selector

A class selector targets elements that have a specific class name.

How Class Selectors Work

You assign a class to an HTML element and then style it using CSS.

Only the element with the class "highlight" is styled.

Why Class Selectors Are Important

Class selectors let you:

1. Reuse styles
2. Target specific elements
3. Keep your CSS organized

Using One Class on Multiple Elements

You can use the same class on many elements.

Both headings now share the same style.

Naming Classes Properly

Good class names describe purpose, not appearance.

For example:

• good: button-primary
• bad: red-button

Class Selectors in Real Projects

Developers use class selectors for:

1. Buttons
2. Cards
3. Navigation menus
4. Layout sections

Why This Matters for Jobs

Most real websites depend on class selectors.

Knowing how to use them well is a key frontend skill.

Common Beginner Mistakes

• Forgetting the dot before class name in CSS
• Using unclear class names
• Overusing classes when not needed

Practice Task

Create a small page and:

1. Add a class to a paragraph
2. Style only that paragraph
3. Reuse the same class on another element

What You Will Learn Next

In the next lesson, you will learn about ID selectors.