HTML CSS Classes

by

CSS classes allow you to apply the same styles to multiple HTML elements without repeating the same CSS rules. They are useful for creating consistent designs across headings, paragraphs, buttons, cards, and other webpage components.

By using classes, you can organize your CSS, reuse styles, and make your website easier to maintain. CSS classes are especially helpful when building larger websites with multiple pages and repeated design elements.

What Is a CSS Class?

A CSS class is a reusable name assigned to one or more HTML elements using the class attribute. You can then target that class in CSS using a period (.) before its name.

For example:

<p class="highlight">This paragraph is highlighted.</p>
<p class="highlight">This paragraph is also highlighted.</p>

You can style both paragraphs with one CSS rule:

.highlight {
  color: blue;
  background-color: #eaf2ff;
  padding: 10px;
}

Both paragraphs receive the same styles because they share the highlight class.

To understand how attributes work in HTML, explore our guide to HTML attributes.

CSS Class Syntax

The basic syntax for defining a CSS class is:

.classname {
  property: value;
}

The period identifies a class selector, while classname represents the class name assigned to HTML elements.

For example:

<style>
  .title {
    color: navy;
    text-align: center;
  }
</style>

<h1 class="title">Welcome to Web4Learners</h1>

In this example, the heading uses the title class, which makes its text navy and centers it.

How to Apply a CSS Class in HTML

Follow these steps to use CSS classes:

  • Add the class attribute to an HTML element.
  • Give the class a descriptive name.
  • Create a CSS rule using a period followed by that name.
  • Add the CSS properties you want to apply.

For example:

<style>
  .message {
    color: green;
    font-size: 18px;
  }
</style>

<p class="message">Your changes have been saved.</p>

The paragraph appears green with an 18-pixel font size.

You can place these styles in an internal stylesheet or move them to an external CSS file for better organization.

Using the Same Class on Multiple Elements

One of the biggest advantages of CSS classes is that you can reuse them across different HTML elements.

<style>
  .blue-text {
    color: blue;
  }
</style>

<h2 class="blue-text">About Us</h2>
<p class="blue-text">Learn more about our website.</p>
<button class="blue-text">Read More</button>

All three elements receive blue text, even though they are different HTML element types.

This approach is useful when you want consistent styling across headings, paragraphs, and buttons.

Using Multiple CSS Classes

An HTML element can have more than one class. Separate class names with spaces inside the class attribute.

<style>
  .card {
    padding: 20px;
    border-radius: 8px;
  }

  .featured {
    background-color: #eaf2ff;
    border: 2px solid #1769aa;
  }
</style>

<div class="card featured">
  <h2>Featured Article</h2>
  <p>Explore our latest web development tutorial.</p>
</div>