Classes and Reusable Styles

What you will learn

• Explain what a CSS class does.
• Recognize a class selector that begins with a dot.
• Understand why reusable styles help a growing page stay consistent.
• Connect a class in HTML with the matching CSS rule.

Why repeating styles by hand becomes messy

If a page has several cards or buttons, writing separate styling rules for each one can become repetitive quickly.

Classes help by giving those repeated parts a shared label that CSS can target once and reuse many times.

Reuse matters

Classes help repeated page parts stay visually consistent.

What a class is in simple language

A CSS class is a reusable label attached to HTML. CSS can then style that class selector instead of styling every repeated part one by one.

A class selector usually starts with a dot, like .card or .button.

Recognize the pattern

A dot often signals a class selector in CSS.

HTML and CSS working together

In HTML, a class might look like class="card". In CSS, the matching selector becomes .card.

That one shared name connects the structure to the styling in a clear, reusable way.

Same label, two places

HTML carries the class name and CSS styles it with a dot selector.

Why consistency improves the page

Reusable class styles keep similar content looking similar. That consistency helps the page feel planned instead of accidental.

It also makes future updates easier because one rule can improve many elements at once.

One change, many results

Reusable styles save time and reduce visual drift.

What to remember before lesson 8

Classes help you style repeated page parts without duplicating the same work over and over.

The next lesson moves into width, height, and display so those repeated boxes behave more predictably in the layout.

Take this forward

Reusable class names make scaling a design much calmer.