7/20/20

HTML ID :- Full Explained


In Html, Html ID is used to specify the unique ID for an Html Elements. You cannot give the same id to multiple Html elements. Html id is given to Html elements so that they have some special name and we can do some work in it with the help of CSS and JavaScript.

NOTE:-
  • In CSS, You can select the Html element with the specific id by using the # symbol.
  • In JavaScript, you can select the Html element with the given id by using the getElementbyID()method.
Syntax:- 

<tag id = “value”>

Let us see through an example:- 

How to Use HTML ID in CSS documents.

<html>
<head>
<title> Example of Html ID </title>
<style>
#Cricket {
font-size: 22px;
color: BLUE;
text-align: center;
background-color: lightblue;
}
#football {
font-size: 36px;
color: red;
text-align: center;
background-color: lightGreen;
</style>
</head>
<body>
<p id = "Cricket"> Cricket  </p>
<p id = "football"> Football </p> 
</body>
</html>


Output:- 



How to Use HTML ID Using JavaScript.

<html>
<head>
<title> Example of Html ID </title>
</head>

<body>

<h2>Using The id Attribute in JavaScript</h2>

<h1 id="head"> Here is my website name </h1>
<button onclick="displayResult()">Click Here</button>

<script>
function displayResult() {
  document.getElementById("head").innerHTML = "Welcome to Mad About Computer";
}
</script>
</body>
</html>


Output:-

Before Click 



After Click 



Different Between Class and ID 

One of the major differences between class and id is that you can give the same class name to multiple Html elements. But you cannot give the Same ID to Multiple elements.

Let us see through an example


<html>
<head>
<title> Example of Html ID </title>
<style>
#bollywood {
font-size: 22px;
color: BLUE;
text-align: center;
background-color: lightblue;
}

.hollywood {
font-size: 36px;
color: red;
text-align: center;
background-color: lightGreen;
}
</style>
</head>

<body>
<p id="bollywood"> Dil Bechara is a Bollywood movie. </p>
<p class="hollywood"> X-Men is a hollywood movie </p>
<p class="hollywood"> Fast and Furious is also a hollywood movie. </p>
<p class="hollywood"> Mission Impossible is also a hollywood movie. </p>
</body>
</html>

Output:- 



So that it for today guys if you have any quarries related to this comment down. I hope you like the article and the Html series. Follow us on my social media handles. Keep visiting here for more computer knowledge.

Thanks for Visiting Here

Have a good day you all.

People May Also Like

0 comments:

Post a Comment

Like us on facebook

blogger templatesblogger widgets

Follow on Twitter

Linkedin

Categories

Blog Archive

Contact Form

Name

Email *

Message *

Mad About Computer. Powered by Blogger.