Id and Classes

Id and Classes in HTML | Web Development

In the previous article, we have learned about forms in which we have used id for some elements. You might have some doubts that what is an id? or why is it used? So in this article, we will learn about Id and classes to clear all your doubts about them.

Id: The id attribute in HTML is used to identify the specific element in an HTML document as the same id can’t be given to any other element in the same document. Every element has its unique Id. and by that Id, the CSS and JavaScript are able to manipulate the specific element and make changes in it.

The Id is declared by using a hash character (#) as a prefix and followed by the id name.

Let’s take an example to understand how the Id attribute works:

<!DOCTYPE html>
<html>
<head>
<style>
#title {
  background-color: #007A4D;
  color: black;
  padding: 40px;
  text-align: center;
} 
</style>
</head>
<body>

<h1 id="title">Developersdome</h1>

</body>
</html>

Output:

Developersdome

Class: The Class attribute in HMTL is used to specify a group of elements that shares the same class. The Class can be used by as many elements as possible and by that class name CSS and JavaScript are able to manipulate them and make changes to them. The changes will appear in every element which is using that specific Class.

The Class is declared by using a dot/period character (.) as a prefix and followed by the class name.

Let’s take an example to understand how the Class attribute works: 

<!DOCTYPE html>
<html>
<head>
<style>
.courses {
  background-color: #007a4d;
  color: black;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="courses">
<h2 style="text-align: center;">Web Development</h2>
</div> 

<div class="courses">
<h2 style="text-align: center;">Android Developemnt</h2>
</div>

</body>
</html>

Output:

Web Development

Android Developemnt

Hope this article will guide you to recognize all about id and the classes that you needed and still if you have any problems or queries regarding this, please post them in the comments section, we will be glad to assist you.

This Post Has 4 Comments

Leave a Reply