mc0de

classes

07
CSS Fundamentals

Classes

Create reusable styles by grouping HTML elements together with CSS classes.

HTML CSS
.highlight {
  color: #20e778;
}

<p class=“highlight”>
  Hello!
</p>

>_ What Is an HTML Class?

A class is a reusable name that you can assign to one or more HTML elements. CSS can then use that class to apply the same style to every matching element.

This becomes especially useful as webpages grow. Instead of repeating the same inline style over and over, you can create a class once and reuse it.

class=

Assign a Class

Use the class attribute inside an HTML opening tag to give an element a class name.

.name

Select the Class

In CSS, a period before the class name creates a class selector.

reuse

Reuse Styles

Multiple elements can share the same class and automatically receive the same styles.

>_ Giving an Element a Class

Classes are added with the class attribute.

index.html
<p class=“highlight”>
  This paragraph is important.
</p>

Here, the paragraph belongs to a class named highlight.

>_ Creating a Class Style

For this lesson, we’ll place CSS inside a <style> element in the page’s <head>.

To select a class in CSS, place a period (.) before its name.

class-style.html
<style>

.highlight {
  color: #087b49;
  font-weight: bold;
}

</style>

>_ Connecting HTML and CSS

The class name in your HTML must match the class selector in your CSS.

class="highlight"

Assigns the HTML element to the highlight class.

.highlight

Selects every element that belongs to the highlight class.

{ }

Curly braces contain the CSS rules that should be applied.

color: ...;

A CSS declaration changes the appearance of every matching element.

>_ One Class, Multiple Elements

The real power of classes is that the same class can be reused.

reusable.html
<h2 class=“highlight”>
  Important Heading
</h2>

<p class=“highlight”>
  Important paragraph.
</p>

Both elements now receive the styles defined by .highlight.

>_ Using More Than One Class

An element can even belong to multiple classes. Separate each class name with a space.

multiple-classes.html
<p
  class=“highlight centered”
>
  Two classes!
</p>
🧩
Remember

HTML uses class="highlight", while CSS selects that class with .highlight. The period belongs in the CSS selector — not inside the HTML class attribute.

Ready to Code?

Build reusable styles.

Create two classes and reuse them across several HTML elements instead of styling each element separately.

⚡
mC0de Challenge

Build Reusable Message Styles

Create reusable CSS classes for success messages and important notes.

  • ✓ Create a class named .success.
  • ✓ Give .success a green color and light green background.
  • ✓ Create another class named .important.
  • ✓ Make .important bold and blue.
  • ✓ Apply success to two different paragraphs.
  • ✓ Apply both classes to one element.
💡 Watch what happens: when you change one class rule, every element using that class updates.
>_ Challenge accepted. Build it below.
>_
mC0de Interactive Sandbox

Classes Challenge

Live Preview
classes.html
HTML + CSS Input EDIT
Live Result PREVIEW
🧩 After finishing, change the .success color once and notice how every matching element updates.
✓
Lesson 07 Recap

What You’ve Learned

✓ Classes give HTML elements reusable names.
✓ HTML assigns classes with class="".
✓ CSS selects a class using a period such as .success.
✓ One class can style many different HTML elements.
✓ An element can use multiple classes.
✓ Changing one class rule updates every element using it.
Reusable styling unlocked! You’re no longer styling elements one at a time — you’re beginning to build a real CSS system.
🚀

Nice work!

Finished this lesson? Mark it complete to track your progress.

← Styles HTML & CSS Home Next Lesson → Selectors