HTML Classes

Anonymous contributor's avatar
Anonymous contributor
Published Aug 3, 2021Updated Mar 20, 2022
Contribute to Docs

Classes are HTML attributes used to select one or more elements for CSS styling or JavaScript purposes.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours

For Styling

The class attribute is commonly used for assigning styles to one or more elements. Multiple classes can be assigned to a single element in a space-separated list. (e.g. class="class1 class2 class3")

Inside the stylesheet, a class name is selected with the following syntax:

.class-name {
}

A class selector is a name preceded by a period (.).

Below is some markup with an outer wrapper-div, containing a level 1 heading and three level 2 sub-headings. The styling for the heading will be unique. However, all elements with the sub-heading class name received the same styling.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .heading {
        background-color: lightcoral;
      }


      .sub-heading {
        background-color: lightskyblue;
        margin: 5px;
      }
    </style>
    <title>Classes</title>
  </head>
  <body>
    <div class="wrapper-div">
      <h1 class="heading">Welcome to Class!</h1>


      <h2 class="sub-heading">_</h2>


      <h2 class="sub-heading">_</h2>


      <h2 class="sub-heading">_</h2>
    </div>
  </body>
</html>

Screenshot of styling for heading and sub-headings.

For JavaScript

The class attribute can also be used to perform JavaScript operations on HTML elements. Through the Document Object Model (“DOM”), there are various JavaScript methods built for selecting elements via their class.

Assuming the markup from the last example is linked to a JavaScript file:

window.onload = function () {
  const subheadings = document.getElementsByClassName('sub-heading');


  for (let i = 0; i < subheadings.length; i++) {
    subheadings.item(i).innerText = `Sub-heading ${i + 1}`;
  }
};

The code above is assigning an event handler to the onload property of the global window object in the browser. When the window as loaded, the elements with class=sub-heading are collected in subheadings. They are then looped over, their innerText property being changed each iteration.

Screenshot of selecting heading and sub-headings with JavaScript

All contributors

Contribute to Docs

Learn HTML on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours