HTML class Attribute | Learn HTML

The HTML class attribute specifies one or more class name for HTML elements. In most case, you will use this attribute to add CSS properties.

In this tutorial, we will learn about HTML class attribute and how you can use it in your documents.


Use of HTML class Attribute

The HTML class attribute can be used in any HTML element. You can define one or more class names by using this attribute.

You can equally distribute CSS styles in different elements by using this attribute.

That means, all the HTML elements having the same class attribute will contain the same CSS style and format.

<style>
.fruits {
  background-color: #4CAF50;
  color: white;
  margin: 15px;
  padding: 20px;
} 
</style>

<div class="fruits">
  <h2>Mango</h2>
  <p>Mango is one of the delicious seasonal fruits.</p>
</div>

<div class="fruits">
  <h2>Apple</h2>
  <p>An apple a day keeps the doctor away.</p>
</div>

The output shows in a web browser:

Mango

Mango is one of the delicious seasonal fruits.

Apple

An apple a day keeps the doctor away.

In this example, both the <div> elements contain same class value (that is fruits). Now any CSS style we add to that class will show up in both elements.

Learn more about CSS style, in our tutorial – HTML CSS


Select Elements With a Specific Class

You have to select any class in order to add styles.

In CSS, write a period (.) character, followed by the class name for select elements with that specific class.

<style>
.fruit {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
} 
</style>

<h2 class="fruit">Mango</h2>
<p>Mango is one of the delicious seasonal fruits.</p>

<h2 class="fruit">Apple</h2>
<p>An apple a day keeps the doctor away.</p>

The output shows in a web browser:

Mango

Mango is one of the delicious seasonal fruits.

Apple

An apple a day keeps the doctor away.


Using HTML Multiple Classes

Each HTML element can contain more than one class name. You have to separate each class name by a space.

These class names add different styles to the elements. This is the most powerful feature of an HTML class attribute.

OUTPUT

In the above example, the first <h2> element contains two class names “color” and “center”.

Therefore, CSS styles added to those classes are showing up in this element.


Use of Same Class in Different Elements

HTML class name can be used in different HTML elements. You can declare different tags with the same class name.

In this case, all the tags having the same class name will be displayed with same style and format.

OUTPUT

In this example, both <h2> and <p> elements have same class name.


Difference Between Class and ID

In HTML, both class and id attributes are used as identifiers. Still, they have some specific difference between them.

  • An HTML id name has to be unique inside a document, but you can use same class name multiple times.
  • It is not possible to declare more than one id name in a single id attribute, but you can use multiple class names in a single class attribute.
  • You have to select an id name with a hash (#). You select a class name with a period (.) character.

HTML class Attribute in JavaScript

You already know how to use class to add CSS properties.

However, you can also use this attribute in javascript to perform certain functions like id attribute, we have seen in our previous tutorial HTML id.

You can select elements with a specific class name by using the getElementsByClassName() method.

You don’t need to worry too much about this method. We will cover everything in our JavaScript tutorials.

OUTPUT


Chapter Summary

  • We select class name with a period (.) character.
  • You can use same class name in different elements.
  • You can declare same class name multiple times.
  • An HTML class attribute specifies one or more class name for HTML elements.
  • Use camel case (example, myHeader) while using two words in the id value. Because space is not allowed.
  • In JavaScript, getElementsByClassName() method is used to select an element using HTML id.

Learn more about formatting HTML code, in our tutorial – HTML Formatting