HTML Class Attribute

The "class" attribute is used to define one or more class names for an element. Commonly, the "class" attribute points to a class in a style sheet. The class name is case sensitive.

This attribute can also be used by JavaScript via the HTML DOM to make certain changes to HTML elements with a specified class name.

In HTML5, the "class" attribute can be used for any HTML element.

In HTML 4.01, the "class" attribute cannot be used with the following elements: <head>, <html>, <base>, <basefont>, <param>, <style>, <meta>, <script>, and <title>.

Although there aren’t specific requirements for the name of classes, it’s better to use names describing the semantic purpose of the element, and not its presentation. The name should begin with a letter a-z or A-Z, and it can be followed by letters, digits (0-9), underscores ("_"), and hyphens ("-").

Syntax

<tag class="classname"></tag>

Example of the HTML "class" attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .red{
      color: red;
      }
      .orange{
      color: orange;
      }
    </style>
  </head>
  <body>
    <h1>Example of the HTML class attribute</h1>
    <p class="red">It is a some red paragraph.</p>
    <p>This is a some text.</p>
    <p class="orange">It is a some yellow paragraph.</p>
  </body>
</html>

In CSS, if you want to select elements with a specific class, use a period (.) character followed by the class name.

Example of the HTML "class attribute used with CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .title {
      background-color: #1c87c9;
      color: #ffffff;
      padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Example of the class attribute</h1>
    <h2 class="title">Heading</h2>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <h2 class="title">Heading</h2>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
  </body>
</html>

HTML elements can also have more than one class name. Each of them must be separated by a space.

Example of the HTML "class" attribute with multiple class names:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .title {
      background-color: #202131;
      color: #dddddd;
      padding: 15px 25px;
      } 
      .text-right {
      text-align: right;
      }
    </style>
  <body>
    <h1>Example of multiple classes</h1>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <h2 class="title">London</h2>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <h2 class="title text-right">Paris</h2>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <h2 class="title">Tokyo</h2>
  </body>
</html>

Different tags, such as <h2> and <p> can have the same class name and the same style.

Example of the HTML "class" attribute with the <h2> and <p> elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-text {
      color: #808080;
      } 
    </style>
  <body>
    <h1>Example of the class attribute </h1>
    <h2 class="grey-text">Heading</h2>
    <p class="grey-text">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
  </body>
</html>



Do you find this helpful?

Related articles