Div -tag
The div tag is known as Division tag.The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). The <div> tag defines a division or a section in an HTML document.
The<div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute.
<html>
<head>
<title>CSS</title>
<style>
div
{
width:100%;
height:50%;
background-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
output
Creating Web Layout using Div Tag and class or id attribute
Example with class attribute
<html>
<head>
<title>CSS</title>
<style>
.a1
{
width:30%;
height:100%;
background-color:pink;
position:absolute;
top:0px;
left:0px;
}
.a2
{
width:70%;
height:50%;
background-color:lavender;
position:absolute;
top:0px;
left:30%;
}
.a3
{
width:70%;
height:50%;
background-color:aqua;
position:absolute;
top:50%;
left:30%;
}
</style>
</head>
<body>
<div class="a1">div tag using class attribute</div>
<div class="a2">div tag using class attribute</div>
<div class="a3">div tag using class attribute</div>
</body>
</html>
output
Example with id attribute
<html>
<head>
<title>CSS</title>
<style>
#demo1
{
width:100%;
height:20%;
background-color:pink;
position:absolute;
top:0px;
left:0px;
}
#demo2
{
width:60%;
height:80%;
background-color:lavender;
position:absolute;
top:130px;
left:0px;
}
#demo3
{
width:50%;
height:80%;
background-color:aqua;
position:absolute;
top:130px;
left:700px;
}
</style>
</head>
<body>
<div id="demo1">div tag using class attribute</div>
<div id="demo2">div tag using class attribute</div>
<div id="demo3">div tag using class attribute</div>
</body>
</html>
output
