HTML classes and IDs

Next Page Previous Page

Class is a block of code that has class objects, we can assign class names to any tag in HTML like sections, divisions, and headings tags. Elements can share one class usually, we can apply styles and functionalities to class objects by using the class name in CSS and JavaScript.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML classes </title>
	</head>
	<body>
		<section class="Section">section</section>
		<div class="div">div</div>
		<h2 class="heading">heading 2</h2>
                          <h1 class=”heading”>Heading 1 that share same class with heading 2</h1>

	</body>
</html>

Let’s apply some style to our classes :

<!DOCTYPE html>
<html>
	<head>
		<style>
		.Section {
		  background-color: red;
		  color: white;
		  padding: 10px;
		}
		.division {
		  background-color: yellow;
		  color: black;
		  padding: 10px;
		}
		.heading {
		  background-color: green;
		  color: white;
		  padding: 10px;
		}
		</style>
	</head>
	<body>
		<section class="Section">section</section>
		<div class="division">div</div>
		<h2 class="heading">heading</h2>	</body></html>

Let’s apply some javascript to our class elements :

<!DOCTYPE html>
<html>
	<head>
		<style>
		.Section {
		  background-color: red;
		  color: white;
		  padding: 10px;
		}
		.division {
		  background-color: yellow;
		  color: black;
		  padding: 10px;
		}
		.heading {
		  background-color: green;
		  color: white;
		  padding: 10px;
		}
		</style>
		<script>
		function myFunction() {
		  var x = document.getElementsByClassName("Section");
		  for (var i = 0; i < x.length; i++) {
			x[i].style.display = "none";
		  }
		}
		</script>
	</head>
	<body>
		<section class="Section">section</section>
		<button onclick="myFunction()">Hide section</button>
		<div class="division">div</div>
		<h2 class="heading">heading</h2>
		
	</body>
</html>

Output Before clicking the button : 

IDs :

Like class, elements cannot share the same id each element have its unique in class we write (.) followed by the class name to apply the style and in Id, we write (#) symbol with id.

Example :

<!DOCTYPE html>
<html>
	<head>
		<style>
		.Section {
		  background-color: red;
		  color: white;
		  padding: 10px;
		}
		.division {
		  background-color: yellow;
		  color: black;
		  padding: 10px;
		}
		.heading {
		  background-color: green;
		  color: white;
		  padding: 10px;
		}
		#abc {
		  background-color: lightblue;
		  color: black;
		  padding: 40px;
		  text-align: center;
		}
		</style>
		<script>
		function myFunction() {
		  var x = document.getElementsByClassName("Section");
		  for (var i = 0; i < x.length; i++) {
			x[i].style.display = "none";
		  }
		}
		</script>
	</head>
	<body>
		<section class="Section">section</section>
		<button onclick="myFunction()">Hide section</button>
		<div class="division">div</div>
		<h2 class="heading">heading</h2>
		<h1 class= "heading">heading 1 that is sharing the same class as heading 2</h1>
		<p id="abc"> this paragraph holds a unique id</p>
	</body>
</html>

 

Next Page Previous Page

Treding Tutorial

Popular Tutorials

to Learn now