Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How div class and id is useful in HTML ?
The HTML If we want to style or interact with the Note ? By default, most browsers always add a new line break before and after the In HTML, using the Using this id, we can style or interact with that particular HTML element using CSS and JavaScript. The id attribute is primarily used when you need to target a specific, individual element. Following is the syntax for defining an id to an HTML element ? We can access the id attribute in CSS using the In HTML, the We can style or manipulate elements with the specific class name using CSS and JavaScript. The class attribute is ideal when you want to apply the same styles to multiple elements. Following is the syntax for defining a class to an HTML element ? We can access the class attribute in CSS using the In the following example, we are creating 4 The output shows four In the example below, we are assigning a class attribute to every In the above program, we styled the div elements using their class names in the Here, we are adding CSS to the In the above program, we styled the div elements using their ID attributes in the Following example demonstrates how JavaScript can interact with This example shows how JavaScript can target multiple elements by class name or a single element by its unique ID. The class button changes all elements with class "highlight", while the ID button targets only the element with ID "special".<div> element is a block-level element that provides structure and layout control to web pages.
<div> elements extremely useful for CSS styling and JavaScript manipulation.
HTML id Attribute
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 the id must be unique within the whole document.Syntax
<div id="mypara1">Welcome to Tutorialspoint</div>
#id selector. Following is the syntax ?
#mypara1 {
color: red;
}
HTML class Attribute
class attribute (global attribute) can be used to specify a class for any HTML element. We can assign the same class to multiple HTML elements. The class name is case-sensitive.Syntax
<h1 class="myheading1">Simply easy learning</h1>
.class selector. Following is the syntax ?
.myheading1 {
color: yellowgreen;
}
Basic Div Elements Without Attributes
Example
<div> elements without assigning them class and id attributes ?
<!DOCTYPE html>
<html>
<head>
<title>DIV in HTML</title>
<style>
div {
border: solid 1px black;
padding: 10px;
margin: 5px;
font-family: Arial, sans-serif;
}
</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>
<div> elements, each with a black border. The browser adds a new line break before and after each <div> element ?
???????????????????
? Tutorialspoint ?
???????????????????
???????????????????
? simply ?
???????????????????
???????????????????
? easy ?
???????????????????
???????????????????
? learning ?
???????????????????
Using Class Attribute with Div Elements
Example
<div> element in the HTML document and styling them using CSS ?
<!DOCTYPE html>
<html>
<head>
<title>DIV with Class Attributes</title>
<style>
div {
border: solid 2px black;
padding: 15px;
margin: 10px;
font-family: Arial, sans-serif;
text-align: center;
}
.mydiv1 {
background-color: lightcoral;
color: white;
}
.mydiv2 {
background-color: lightgreen;
color: darkgreen;
}
.mydiv3 {
background-color: lightseagreen;
color: white;
}
.mydiv4 {
background-color: lightslategrey;
color: white;
}
</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>
<style> tags. Each div has a unique background color applied through its class ?
???????????????????????
? Tutorialspoint ? (light coral background)
???????????????????????
???????????????????????
? simply ? (light green background)
???????????????????????
???????????????????????
? easy ? (light sea green background)
???????????????????????
???????????????????????
? learning ? (light slate grey background)
???????????????????????
Using ID Attribute with Div Elements
Example
<div> elements with the help of their id attributes ?
<!DOCTYPE html>
<html>
<head>
<title>DIV with ID Attributes</title>
<style>
div {
border: solid 2px black;
padding: 15px;
margin: 10px;
font-family: Arial, sans-serif;
text-align: center;
}
#mydiv1 {
background-color: lightslategrey;
color: white;
font-weight: bold;
}
#mydiv2 {
background-color: lightseagreen;
color: white;
font-style: italic;
}
#mydiv3 {
background-color: lightgreen;
color: darkgreen;
text-decoration: underline;
}
#mydiv4 {
background-color: lightcoral;
color: white;
text-transform: uppercase;
}
</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>
<style> tags. Each div has unique styling applied through its individual id ?
???????????????????????
? Tutorialspoint ? (grey background, bold text)
???????????????????????
???????????????????????
? simply ? (sea green background, italic)
???????????????????????
???????????????????????
? easy ? (green background, underlined)
???????????????????????
???????????????????????
? LEARNING ? (coral background, uppercase)
???????????????????????
JavaScript Interaction with Div Class and ID
Example
<div> elements using class and id attributes ?
<!DOCTYPE html>
<html>
<head>
<title>JavaScript with Div Class and ID</title>
<style>
.highlight { background-color: yellow; padding: 10px; margin: 5px; }
#special { border: 3px solid red; background-color: lightblue; padding: 10px; }
button { margin: 5px; padding: 8px 16px; font-family: Arial, sans-serif; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<div class="highlight">This div has a class 'highlight'</div>
<div class="highlight">This div also has the same class</div>
<div id="special">This div has an ID 'special'</div>
<button onclick="changeClass()">Change Class Elements</button>
<button onclick="changeId()">Change ID Element</button>
<script>
function changeClass() {
var elements = document.getElementsByClassName("highlight");
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "lightgreen";
}
}
function changeId() {
document.getElementById("special").innerHTML = "Content changed via ID!";
}
</script>
</body>
</html>
Key Differences Between Class and ID
585 Views
