The class Attribute

The class Attribute

<!DOCTYPE html>
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;

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

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

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

  • Is used to define equal styles for elements with the same class name.
  • Is case sensitive.
  • Can be used on any HTML element.
  • Different tags, like <h2> and <p>, can have the same class name and thereby share the same style.
  • HTML elements can have more than one class name, each class name must be separated by a space.

Using The class Attribute in JavaScript

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

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.

The class Attribute — Structure map

Clickable & Draggable!

The class Attribute — Related pages: