HTML Classes.

The HTML 'class' attribute is used to specify one or more classnames for an element, allowing you to style multiple elements with the same CSS.

The Essentials

A class name can be used by multiple HTML elements.

The same element can have multiple classes (separated by spaces).

In CSS, you target a class using a period (.) followed by the class name.

Classes are case-sensitive and cannot start with a number.

They are essential for creating reusable style components.

JavaScript can also use classes to select and manipulate groups of elements.

Professional Insights

Classes vs. IDs

Use classes for styles that repeat on a page. Use IDs for unique elements that only appear once (like a 'header' or 'main-nav').

Naming Conventions (BEM)

Professional developers often use naming systems like BEM (Block Element Modifier) to make their class names more descriptive and easier to manage in large projects.

Utility-First CSS

Modern frameworks like Tailwind CSS rely heavily on classes to apply individual styles directly to elements, rather than writing custom CSS rules.

Multiple Classes in Action

You can combine classes like <div class='card shadow rounded'> to build complex designs from simple, reusable building blocks.

Critical Pitfalls

Using a period (.) inside the HTML class attribute (e.g., class='.myClass'). The dot is only for CSS selectors.

Using spaces in a single class name—spaces separate two different classes.

Starting a class name with a number, which can cause issues in some browsers.

Using unique names for every single element when a shared class would be more efficient.

Interactive Lab

Sprint Tasks

Add a class named 'city' to all three <div> elements

In a real scenario, this would allow you to style all three at once in your CSS

Loading editor...

Production Preview