HTML Div Element
HTML DIV Element
HTML Div Element
HTML Div Tag
<!DOCTYPE html>
<html>
<head>
<title>HTML Div Element</title>
<style>
.div1 {
background-color: #ffbcca;
}
</style>
</head>
<body>
<h3>HTML Div Tag</h3>
<div class="div1">I am a div Tag</div>
</body>
</html>Div Tag Background Color
India
New Delhi is the capital of India.
India is a land of various cultures and a rich heritage. It is the seventh-largest country by area and the second-most populous country globally.
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Background Color</title>
</head>
<body>
<div style="background-color: #d22459; color:white; padding:30px;">
<h3>India</h3>
<p>New Delhi is the capital of India.</p>
<p>India is a land of various cultures and a rich heritage. It is the seventh-largest country by area and the second-most populous country globally.</p>
</div>
</body>
</html> Multiple Div Elements
Multiple Div Elements
Apple
Apple are a good source of several vitamins and minerals, including Vitamin C, Vitamin K, and several B vitamins
Banana
Banana are a good source of several vitamins and minerals, including Vitamin B6, Vitamin C, potassium, and manganese.
Orange
Orange are a great source of Vitamin C, which is an important nutrient for boosting the immune system.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Div Elements</title>
</head>
<body>
<h3>Multiple Div Elements</h3>
<div style="background-color:#df2530; color: #f1f1f1; padding:3px; font-size: large;">
<h4>Apple</h4>
<p>Apple are a good source of several vitamins and minerals, including Vitamin C, Vitamin K, and several B vitamins</p>
</div>
<div style="background-color:#fffa3e; color: #000; padding:3px; font-size: large;">
<h4>Banana</h4>
<p>Banana are a good source of several vitamins and minerals, including Vitamin B6, Vitamin C, potassium, and manganese.</p>
</div>
<div style="background-color:#ff7805; color: #f1f1f1; padding:3px; font-size: large;">
<h4>Orange</h4>
<p>Orange are a great source of Vitamin C, which is an important nutrient for boosting the immune system.</p>
</div>
</body>
</html>Align <div> Elements side by side
Align Div Elements side by side
Apple
Apple are a good source of several vitamins and minerals, including Vitamin C, Vitamin K, and several B vitamins
Banana
Banana are a good source of several vitamins and minerals, including Vitamin B6, Vitamin C, potassium, and manganese.
Orange
Orange are a great source of Vitamin C, which is an important nutrient for boosting the immune system.
<!DOCTYPE html>
<html>
<head>
<title>Align Div Elements side by side</title>
<style>
div.container div {
width: 33%;
float: left;
}
</style>
</head>
<body>
<h3>Align Div Elements side by side</h3>
<div class="container">
<div style="background-color:#df2530; color: #f1f1f1; padding:3px;">
<h5>Apple</h5>
<p>Apple are a good source of several vitamins and minerals, including Vitamin C, Vitamin K, and several B
vitamins</p>
</div>
<div style="background-color:#fffa3e; color: #000; padding:3px;">
<h5>Banana</h5>
<p>Banana are a good source of several vitamins and minerals, including Vitamin B6, Vitamin C, potassium,
and manganese.</p>
</div>
<div style="background-color:#ff7805; color: #f1f1f1; padding:3px;">
<h5>Orange</h5>
<p>Orange are a great source of Vitamin C, which is an important nutrient for boosting the immune system.
</p>
</div>
</div>
</body>
</html>Inline Block
Inline Block
Apple
Apple are a good source of several vitamins and minerals, including Vitamin C, Vitamin K, and several B vitamins
Banana
Banana are a good source of several vitamins and minerals, including Vitamin B6, Vitamin C, potassium, and manganese.
Orange
Orange are a great source of Vitamin C, which is an important nutrient for boosting the immune system.
<!DOCTYPE html>
<html>
<head>
<title>Inline Block</title>
<style>
.div3 {
display:inline-block;
width: 32%;
}
</style>
</head>
<body>
<h3>Inline Block</h3>
<div class="div3"; style="background-color:#df2530; color: #f1f1f1; padding:3px;">
<h5>Apple</h5>
<p>Apple are a good source of several vitamins and minerals, including Vitamin C, Vitamin K, and several B
vitamins</p>
</div>
<div class="div3"; style="background-color:#fffa3e; color: #000; padding:3px;">
<h5>Banana</h5>
<p>Banana are a good source of several vitamins and minerals, including Vitamin B6, Vitamin C, potassium,
and manganese.</p>
</div>
<div class="div3"; style="background-color:#ff7805; color: #f1f1f1; padding:3px;">
<h5>Orange</h5>
<p>Orange are a great source of Vitamin C, which is an important nutrient for boosting the immune system.
</p>
</div>
</body>
</html>Grid
Grid
Align three DIV elements side by side
Apple
Apple are a good source of several vitamins and minerals, including Vitamin C, Vitamin K, and several B vitamins
Banana
Banana are a good source of several vitamins and minerals, including Vitamin B6, Vitamin C, potassium, and manganese.
Orange
Orange are a great source of Vitamin C, which is an important nutrient for boosting the immune system.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
}
</style>
</head>
<body>
<h3>Grid</h3>
<p>Align three DIV elements side by side</p>
<div class="grid-container">
<div style="background-color:#df2530; color: #f1f1f1; padding:3px;">
<h5>Apple</h5>
<p>Apple are a good source of several vitamins and minerals, including Vitamin C, Vitamin K, and several B
vitamins</p>
</div>
<div style="background-color:#fffa3e; color: #000; padding:3px;">
<h5>Banana</h5>
<p>Banana are a good source of several vitamins and minerals, including Vitamin B6, Vitamin C, potassium,
and manganese.</p>
</div>
<div style="background-color:#ff7805; color: #f1f1f1; padding:3px;">
<h5>Orange</h5>
<p>Orange are a great source of Vitamin C, which is an important nutrient for boosting the immune system.
</p>
</div>
</div>
</body>
</html>