HTML The class Attribute

Using The class Attribute

The class attribute specifies one or more class names for an HTML element.

The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.

In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class:


Use CSS to style all elements with the class name "city":

.city {
    background-color: tomato;
    color: white;
    padding: 10px;

<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>



London is the capital of England.


Paris is the capital of France.


Tokyo is the capital of Japan.

Try it Yourself »

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

Tip: You can learn much more about CSS in our CSS Tutorial.

Using The class Attribute in JavaScript

JavaScript can access elements with a specified class name by using the getElementsByClassName() method:


When a user clicks on a button, hide all elements with the class name "city":

function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
Try it Yourself »

Tip: Study JavaScript in the chapter HTML JavaScript, or in our JavaScript Tutorial.

Multiple Classes

HTML elements can have more than one class name, each class name must be separated by a space.


Style elements with the class name "city", also style elements with the class name "main":

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Try it Yourself »

In the example above, the first <h2> element belongs to both the "city" class and the "main" class.

Same Class, Different Tag

Different tags, like <h2> and <p>, can have the same class name and thereby share the same style:


<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Try it Yourself »

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »