Contents

This is the Eight part of the HTML course for front-end web development. Starting with HTML is like making a skeleton of a website. and today we will learn, IDs And Classes In HTML. id as Identifier id and class in html difference between class and id in html container class in html class and id selector in html how to write class in html .

Id in HTML

We use Id in HTML to make it unique or to name it. Like we have different name. and identified as our names, similarly id in HTML does. It act as an identifier. id can only be define once no same id is provided to other functions.

<body>
    <h3 id="tech" >Id in HTML </h3>
</body>

Id in HTML

What is the use of id in HTML

We define an block or inline or header element and to modify it with boders, background colours, padding, hover effect etc. we call it by its id to modify it using CSS or JavaScript Separately in head. Example given below

The id name in HTML must contain at least one character, cannot start with a number, and must not contain whitespaces. It is a case sensitive.

<head>
<style>
#Tech { /*  CSS Used Here  */
  background-color: black;
  color: Orange;
  padding: 30px;
  text-align: center;
}
</style>
</head>
<body>
    <h1 id="Tech" >Id in HTML </h1>
</body>

Id in HTML

Looks amazing right ? We will study it deeply in CSS as to design a page, CSS is going to be very useful. Want to better understand the style sheet syntax ?

Class in HTML

Instead of defining a single element style one by one, we can make class of any name and directly modify the name that will modify other as well with this class name.

We can assign a class name multiple times.

<!DOCTYPE html>
<html>
<head>
<style>
.game {
  background-color: black;
  color: orange;
  border: 5px solid orange;
  margin: 20px;
  padding: 35px;
}
  .game:hover {
  background-color: orange;
  color: black;
  /*box-shadow: 5px 5px 10px black;*/
  /*border: 10px solid black;*/
  margin: 0px;
  padding: 40px;
}
</style>
</head>
<body>

<div class="game">
<h2>HTML Course</h2>
</div> 

<div class="game">
<h2>Id and Class in HTML</h2>
</div>

<div class="game">
<h2>This is the Class example</h2>
</div>

</body>
</html>