HTML Classes

HTML The class Attribute



Using The class Attribute

The HTML class attribute is used to define equal styles for elements with the same class name.

So, all HTML elements with the same class attribute will get the same style.

Here we have three <div> elements that point to the same class name:

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class=”cities”>
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class=”cities”>
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class=”cities”>
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Using The class Attribute on Inline Elements

The HTML class attribute can also be used on inline elements:

<!DOCTYPE html>
<html>
<head>
<style>
span.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>

My Important Heading

This is some important text.

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.

 

Select Elements With a Specific Class

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

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

The class Attribute

Use CSS to style elements with the class name “city”:

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

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

<!DOCTYPE html>

<html>

<style>

.city {

  background-color: tomato;

  color: white;

  padding: 10px;

 

.main {

  text-align: center;

}

</style>

<body>

 

<h2>Multiple Classes</h2>

<p>All three headers have the class name “city”. In addition, London also have the class name “main”, which center-aligns the text.</p>

 

<h2 class=”city main”>London</h2>

<h2 class=”city”>Paris</h2>

<h2 class=”city”>Tokyo</h2>

 

</body>

</html>

 

Multiple Classes

All three headers have the class name “city”. In addition, London also have the class name “main”, which center-aligns the text.

London

Paris

Tokyo

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

Different Tags Can Share Same Class

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

 

<!DOCTYPE html>

<html>

<style>

.city {

  background-color: tomato;

  color: white;

  padding: 10px;

</style>

<body>

 

<h2>Same Class, Different Tag</h2>

<p>Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling:</p>

 

<h2 class=”city”>Paris</h2>

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

 

</body>

</html>

 

Same Class, Different Tag

Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling:

Paris

Paris is the capital of France.

Using The class Attribute in JavaScript

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

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

<!DOCTYPE html>

<html>

<body>

 

<h2>Using The class Attribute in JavaScript</h2>

<p>Click the button, to hide all elements with the class name “city”, with JavaScript:</p>

 

<button onclick=”myFunction()”>Hide elements</button>

 

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

 

<script>
function myFunction() {
  var x = document.getElementsByClassName(“city”);
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = “none”;
  }
}
</script>

 

</body>

</html>

 

Using The class Attribute in JavaScript

Click the button, to hide all elements with the class name “city”, with JavaScript:

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.