HTML class Attribute

The HTML class attribute lets you give a name to one or more elements. That way, you can style all of them at once with CSS or manipulate them together with JavaScript.

What is the Class Attribute?

The class attribute is used to group HTML elements together. Multiple elements can share the same class name. When you write CSS rules for that class, all elements with that class get the styles automatically.

Think of it like a team jersey. Everyone wearing the same jersey belongs to the same team. In HTML, everyone with the same class shares the same styles.

Notice how all three divs look exactly the same? That is because they all use the same class called demo-city. I only wrote the CSS once, and it applied to all of them.

Using Class on Different Elements

The class attribute works on any HTML element. You can use the same class on headings, paragraphs, divs, spans, or anything else.

See how the class demo-highlight is used on multiple <span> tags? They all get the yellow background and bold text automatically.

The Syntax for Creating a Class

To create a class in CSS, you use a period (.) followed by the class name. Then you put the CSS properties inside curly braces {}.

.demo-class-name {
  property: value;
  property: value;
}

In HTML, you apply the class using the class attribute, without the period:

<div class="demo-class-name">Content here</div>

Multiple Classes on One Element

An element can have more than one class. Just separate the class names with a space. The element will get all the styles from all the classes.

This is very useful. You can have a base class with common styles, and additional classes for special cases.

Notice how the third div has the red background from demo-red, the border and padding from demo-card, AND larger text from demo-large. Combining classes gives you a lot of flexibility.

Different Elements Sharing the Same Class

Different types of HTML elements can share the same class. A heading, a paragraph, and a div can all have the same class name and get the same styles.

All three elements look similar even though they are different types (h2, p, and div). That is the power of classes. They work on anything.

Using Class with JavaScript

Classes are not just for CSS. JavaScript can also use classes to find and manipulate elements. Here is a simple example. Click the button to hide all elements with the class “demo-city”.

Do not worry if the JavaScript looks confusing. You will learn JavaScript later. For now, just know that classes let JavaScript find and work with specific elements.

Quick Summary

• The class attribute groups HTML elements together.
• Multiple elements can share the same class.
• In CSS, use a period (.) before the class name (like .demo-class).
• In HTML, use the class attribute without the period (like class="demo-class").
• An element can have multiple classes separated by spaces.
• Different element types (h1, p, div, span) can share the same class.
• Class names are case sensitive.
• JavaScript can use classes to find and manipulate elements.

What Just Happened? Let Me Explain

• Classes are one of the most important concepts in HTML and CSS. You will use them on almost every project.
• Using classes saves you time. Instead of writing the same styles for ten different elements, you write one class and apply it to all ten.
• You can reuse classes across different pages of your website.
• Give your classes meaningful names like "demo-error-message", "demo-success-box", or "demo-nav-link". Avoid names like "red" or "big" because they describe style, not purpose.
• The period (.) is only used in CSS. Do not put it in your HTML class attribute.

HTML Class Reference

Here are the concepts we covered in this chapter: