HTML Class Attribute

On this page

HTML Class Attribute

China

The Great Wall of China

Italy

The Roman Colosseum

India

Taj Mahal

html

<!DOCTYPE html>
<html>
<head>
  <title>HTML Class Attribute</title>
<style>
.wonders {
  background-color: #3ea8fe;
  color: white;
  border: 3px solid black;
  margin: 20px;
  padding: 10px;
}
</style>
</head>
<body>

<div class="wonders">
<h3>China</h3>
<p>The Great Wall of China</p>
</div> 

<div class="wonders">
<h3>Italy</h3>
<p>The Roman Colosseum</p>
</div>

<div class="wonders">
<h3>India</h3>
<p>Taj Mahal</p>
</div>

</body>
</html>

Multiple Classes

Apple

Banana

Orange

html

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Classes</title>
<style>
.Apple {
  background-color: #df2530;
  color: white;
  padding: 20px;
  text-align: left;
} 

.Banana {
  background-color: #fffa3e;
  color: black;
  padding: 20px;
  text-align: center;
} 

.Orange {
  background-color: #ff7804;
  color: white;
  padding: 20px;
  text-align: right;
} 
</style>
</head>
<body>

<h3>Multiple Classes</h3>

<h3 class="Apple">Apple</h3>
<h3 class="Banana">Banana</h3>
<h3 class="Orange">Orange</h3>

</body>
</html>

Different Elements same class name

Apple

Banana

Orange

html

<!DOCTYPE html>
<html>
<head>
  <title>Different Elements same class name</title>
<style>
.fruits {
  background-color: #e1356b;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<h3>Different Elements same class name</h3>

<h4 class="fruits">Apple</h4>
<h4 class="fruits">Banana</h4>
<p class="fruits">Orange</p>

</body>
</html>

Class Attribute JavaScript

html

<!DOCTYPE html>
<html>
<head>
  <title>Class Attribute JavaScript</title>
  <style>
  div{
  min-height: 50px;
  min-width: 50px;
}
.bordered{
  border: 3px solid black;
}
.green{
  background: green;
}
.blue{
  background: blue;
}
  </style>
</head>
<body>

  <button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>

<script>
var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});
</script>

</body>
</html>