HTML class Attribute

The HTML `class` attribute is used to assign one or more class names to an HTML element. Classes are used as a way to select and style elements using CSS or to manipulate elements using JavaScript.

The `class` attribute can be applied to most HTML elements, and an element can have multiple class names separated by spaces. It is important to note that class names are case-sensitive.

Here's an example of how to use the `class` attribute in HTML and style the elements using CSS:


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Class Attribute Example</title>
    .red-text {
      color: red;
    .large-font {
      font-size: 24px;
  <h1 class="red-text">This heading has the "red-text" class.</h1>
  <p class="red-text large-font">This paragraph has both the "red-text" and "large-font" classes.</p>
  <p class="large-font">This paragraph has the "large-font" class.</p>

In this example, we have created two CSS classes: `.red-text` and `.large-font`. The `.red-text` class sets the text color to red, while the `.large-font` class sets the font size to 24 pixels. We then use the `class` attribute to apply these classes to different elements in the HTML document.

In summary, the `class` attribute in HTML is used to assign class names to elements, making it easier to target and style elements using CSS or manipulate them using JavaScript.

Was this page helpful?