---
description: >-
  The HTML class attribute is used to specify a class for an HTML element. 
  Multiple HTML elements can share the same class.
---

# HTML class Attribute

### Using The class Attribute

The `class` attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three `<div>` elements with a `class` attribute with the value of "city". All of the three `<div>` elements will be styled equally according to the `.city` style definition in the head section:

{% code overflow="wrap" lineNumbers="true" %}
```markup
<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>
```
{% endcode %}

In the following example we have two `<span>` elements with a `class` attribute with the value of "note". Both `<span>` elements will be styled equally according to the `.note` style definition in the head section:

{% code overflow="wrap" lineNumbers="true" %}
```markup
<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>
```
{% endcode %}

### The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:

{% code overflow="wrap" lineNumbers="true" %}
```markup
<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>
```
{% endcode %}

### Multiple Classes

HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. \<div class="city main">. The element will be styled according to all the classes specified.

In the following example, the first `<h2>` element belongs to both the `city` class and also to the `main` class, and will get the CSS styles from both of the classes:&#x20;

{% code overflow="wrap" lineNumbers="true" %}
```markup
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
```
{% endcode %}

### Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both `<h2>` and `<p>` point to the "city" class and will share the same style:

{% code overflow="wrap" lineNumbers="true" %}
```markup
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
```
{% endcode %}

### Use of The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with the `getElementsByClassName()` method:

{% code overflow="wrap" lineNumbers="true" %}
```html
<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>
```
{% endcode %}

### Summary

* The HTML `class` attribute specifies one or more class names for an element
* Classes are used by CSS and JavaScript to select and access specific elements
* The `class` attribute can be used on any HTML element
* The class name is case sensitive
* Different HTML elements can point to the same class name
* JavaScript can access elements with a specific class name with the `getElementsByClassName()` method
