Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How div, class, and id are Useful in HTML
The HTML <div> tag represents a division or section in an HTML document. This tag is used as a container, inside this we can embed any of the HTML elements (such as texts, images, tables, audio, video, etc.).
If we want to style or interact with the <div> element, we can assign an id or class attribute.
Note ? By default, most browsers always add a new line break before and after the <div> element.
HTML id Attribute
In HTML, using the id attribute (global attribute), we can specify a unique identifier for any HTML element. We cannot assign more than one element with the same id in an HTML document, so that, the id must be unique in the whole document.
Using this id, we can style or interact with that particular HTML element using CSS and JavaScript.
Syntax
Following is the syntax for defining an id to an HTML attribute ?
<p id = mypara1> Welcome to Tutorialspoint </p>
We can access the id attribute in CSS using the (#id) selector. Following is the syntax ?
#mypara{
color: Red;
}
HTML class Attribute
In HTML, the class attribute (global attribute) can be used to specify a class for any HTML element. We can assign same class to multiple HTML elements. The class name is case-sensitive.
We can style or manipulate elements with the specific class name using CSS and JavaScript.
Syntax
Following is the syntax for defining a class to an HTML attribute ?
<h1 class = myheading1> Simply easy learning </h1>
We can access the class attribute in CSS using the (.class) selector. Following is the syntax ?
.myheading1{
color: yellowgreen;
}
Example
In the following example, we are creating 4 <div> elements without assigning them class and id attributes ?
<!DOCTYPE html>
<html>
<head>
<title>DIV in HTML</title>
<style>
div {
border: solid 1px;
}
</style>
</head>
<body>
<div>
<p>Tutorialspoint</p>
</div>
<div>
<p>simply</p>
</div>
<div>
<p>easy</p>
</div>
<div>
<p>learning</p>
</div>
</body>
</html>
Output
As we can see in the output, we have three <div> elements, and the browser added a new line break before and after the <div> element.
Example
In the example below, we are assigning a class attribute to every <div> element in the HTML document and styling them using CSS ?
<!DOCTYPE html>
<html>
<head>
<title>DIV in HTML</title>
<style>
div {
border: solid 1px;
padding: 10px;
}
.mydiv1 {
background-color: lightcoral;
}
.mydiv2 {
background-color: lightgreen;
}
.mydiv3 {
background-color: lightseagreen;
}
.mydiv4 {
background-color: lightslategrey;
}
</style>
</head>
<body>
<div class="mydiv1">
<p>Tutorialspoint</p>
</div>
<div class="mydiv2">
<p>simply</p>
</div>
<div class="mydiv3">
<p>easy</p>
</div>
<div class="mydiv4">
<p>learning</p>
</div>
</body>
</html>
Output
In the above program, we styled the div elements using their class in the <style> tags.
Example
Here, we are adding CSS to the <div> elements with the help of their id.
<!DOCTYPE html>
<html>
<head>
<title>DIV in HTML</title>
<style>
div{
border: solid 1px;
padding: 10px;
}
#mydiv1{
background-color: lightslategrey;
}
#mydiv2{
background-color: lightseagreen;
}
#mydiv3{
background-color: lightgreen;
}
#mydiv4{
background-color: lightcoral;
}
</style>
</head>
<body>
<div id="mydiv1">
<p>Tutorialspoint</p>
</div>
<div id="mydiv2">
<p>simply</p>
</div>
<div id="mydiv3">
<p>easy</p>
</div>
<div id="mydiv4">
<p>learning</p>
</div>
</body>
</html>
Output
In the above program, we styled the div elements using their IDs in the <style> tags.
365 Views
