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 do we style HTML elements using the division tag ?
The <div> tag is used as a container for HTML elements. It helps define sections within an HTML document and groups large sections of HTML elements together for easy formatting. The <div> tag is a block-level element that accepts all CSS properties and can be styled using attributes like class and id.
The div tag is primarily used for −
Grouping elements − Combining related HTML elements into logical sections
Layout structure − Creating page layouts with headers, sidebars, and content areas
CSS styling − Applying styles to multiple elements at once
JavaScript manipulation − Targeting groups of elements for dynamic behavior
Syntax
Following is the basic syntax for the <div> tag −
<div class="className">Content...</div>
Using CSS class selector −
.className {
/* CSS properties */
}
Using CSS ID selector −
#idName {
/* CSS properties */
}
Using CSS Classes with Div
Example − Basic Div Styling
Following example demonstrates basic styling of div elements using CSS classes −
<!DOCTYPE html>
<html>
<head>
<title>Div Styling with Classes</title>
<style>
.parent {
border: 2px solid green;
margin: 20px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 15px;
margin: 5px;
background-color: #2ecc71;
color: white;
border-radius: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="parent">
<div class="division">Div Element 1</div>
<div class="division">Div Element 2</div>
<div class="division">Div Element 3</div>
</div>
</body>
</html>
The output displays three styled div elements inside a parent container with green border and shadow −
[Green bordered container with three inline green boxes containing "Div Element 1", "Div Element 2", "Div Element 3"]
Advanced Div Styling
Example − Enhanced Typography and Effects
Following example shows more advanced CSS styling applied to div elements −
<!DOCTYPE html>
<html>
<head>
<title>Advanced Div Styling</title>
<style>
.parent {
border: 2px solid green;
margin: 20px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 15px;
margin: 5px;
background-color: #2ecc71;
color: white;
text-transform: uppercase;
text-decoration: underline;
font-family: 'Arial', sans-serif;
font-size: 1.1rem;
font-weight: bold;
font-style: italic;
border-radius: 8px;
transition: transform 0.3s ease;
}
.division:hover {
transform: scale(1.05);
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="parent">
<div class="division">Styled Div 1</div>
<div class="division">Styled Div 2</div>
<div class="division">Styled Div 3</div>
</div>
</body>
</html>
The output shows enhanced div elements with gradient background, uppercase text, and hover effects −
[Gradient background container with three styled boxes showing "STYLED DIV 1", "STYLED DIV 2", "STYLED DIV 3" with underlined, bold, italic text]
Using ID Selector with Div
Example − ID-Based Styling
Following example demonstrates styling div elements using ID selectors and descendant selectors −
<!DOCTYPE html>
<html>
<head>
<title>Div with ID Selector</title>
<style>
#container {
background-color: #f0f8ff;
border: 2px solid #4682b4;
padding: 25px;
margin: 20px;
border-radius: 10px;
}
#container p {
line-height: 1.6;
margin: 15px 0;
padding: 15px;
text-align: justify;
color: #2c3e50;
background-color: white;
border-left: 4px solid #3498db;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div id="container">
<p>Welcome to our comprehensive learning platform. We provide high-quality tutorials on web development, programming languages, and modern technologies to help you advance your career.</p>
<p>Our structured approach ensures you learn concepts step-by-step with practical examples and real-world applications.</p>
</div>
</body>
</html>
The output displays a styled container with formatted paragraphs that have blue left borders and subtle shadows −
[Light blue container with two white paragraph boxes, each having a blue left border and containing the welcome text]
Layout Techniques with Div
Example − Flexbox Layout
Following example shows how to use div elements with CSS Flexbox for responsive layout −
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Layout with Div</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
margin: 20px;
border-radius: 10px;
}
.flex-item {
flex: 1;
background-color: white;
margin: 0 10px;
padding: 20px;
text-align: center;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.flex-item:hover {
transform: translateY(-5px);
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="flex-container">
<div class="flex-item">
<h3>HTML</h3>
<p>Structure</p>
</div>
<div class="flex-item">
<h3>CSS</h3>
<p>Styling</p>
</div>
<div class="flex-item">
<h3>JavaScript</h3>
<p>Behavior</p>
</div>
</div>
</body>
</html>
The output shows three equal-width columns arranged horizontally with hover effects −
[Purple gradient container with three white cards side-by-side: "HTML Structure", "CSS Styling", "JavaScript Behavior"]
Common Styling Properties
Following table shows commonly used CSS properties for styling div elements −
| Property | Description | Example Value |
|---|---|---|
| background-color | Sets the background color | #3498db, blue, rgb(52, 152, 219) |
| border | Defines border width, style, and color | 2px solid red |
| padding | Internal spacing inside the element | 20px, 10px 15px |
| margin | External spacing outside the element | 10px auto, 5px 10px 15px 20px |
| display | Defines how the element is displayed | block, inline-block, flex, grid |
| width/height | Sets element dimensions | 300px, 50%, 100vh |
Conclusion
The <div> tag is a versatile container element that serves as the foundation for CSS styling and layout design in HTML. By combining div elements with CSS classes, IDs, and modern layout techniques like Flexbox, you can create sophisticated, responsive web page structures and apply consistent styling across multiple elements.
608 Views
