<!--CLASS & ID & DIV-->
Theory :
Class:
A class is a keyword used to define a group of elements that share common properties.
It is used to apply styles or behaviors to a group of elements.
Classes can be applied to multiple elements on a page.
Syntax: <element class="class_name">
ID:
A class is a keyword used to define a group of elements that share common properties.
It is used to apply styles or behaviors to a group of elements.
Classes can be applied to multiple elements on a page.
Syntax: <element class="class_name">
ID:
An ID is a unique identifier used to identify a single element on a page.
It is used to target a specific element for styling or scripting.
IDs should be unique within a document.
Syntax: <element id="id_name">
DIV:
It is used to target a specific element for styling or scripting.
IDs should be unique within a document.
Syntax: <element id="id_name">
DIV:
A DIV is an HTML element that represents a generic block-level container.
It is used to group elements together and create sections on a page.
DIVs can be styled using CSS to change their appearance.
Syntax: <div>
Differences:
It is used to group elements together and create sections on a page.
DIVs can be styled using CSS to change their appearance.
Syntax: <div>
Differences:
Class: Can be applied to multiple elements, while ID should be unique.
ID: Used to target a specific element, while class is used to group elements.
DIV: Is an HTML element that represents a container, while class and ID are attributes used to style or identify elements.
<!doctype html>
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
.red {
color:red;
}
.large {
font-size: 200%;
}
#green {
color:green;
}
.underlined {
text-decoration: underline;
}
#first-section {
color:blue;
background-color: pink;
width:100px;
}
#second-section {
color: red;
background-color: yellow;
width:200px;
}
</style>
</head>
<body>
<div id="first-section">
ID: Used to target a specific element, while class is used to group elements.
DIV: Is an HTML element that represents a container, while class and ID are attributes used to style or identify elements.
<!doctype html>
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
.red {
color:red;
}
.large {
font-size: 200%;
}
#green {
color:green;
}
.underlined {
text-decoration: underline;
}
#first-section {
color:blue;
background-color: pink;
width:100px;
}
#second-section {
color: red;
background-color: yellow;
width:200px;
}
</style>
</head>
<body>
<div id="first-section">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>Wow, I love internal CSS!</p>
</div>
<p class="red large">The quick brown fox jumped over the lazy dog.</p>
<p class="large">Wow, I love internal CSS!</p>
<p id="green">This is some more text. <span class="underlined">And this text is underlined.</span></p>
<div id="second-section"><h1 class="red">CSS is cool!</h1></div>
</body>
</html>
OUTPUT:
