- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do we style HTML elements using the division tag ?
The <div> tag is used as the container for the HTML elements. With the help of this tag, we can easily define a section of a HTML Document. It is also used to group large sections of HTML elements together and easily format them. The <div> tag is used with block-level elements.
The <div> tag accepts all the CSS properties and styles the elements in it using attributes like class and id.
Syntax
Following is the syntax for the <div> tag.
<div class='division'>Content…</div>
Example 1
Given below is an example to add style to the division tag in HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1rem solid green;
margin: 1rem;
padding: 1rem 1rem;
text-align: center;
box-shadow: 2px 2px 20px 23px aquamarine;
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 1rem 1rem;
background-color: #2ecc71;
color: white;
}
</style>
</head>
<body>
<div class='parent'>
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
<div class='division'>div tag 3</div>
</div>
</body>
</html>
Following is the output for the above example program.
We can add more styles to the <div> tag.
Example 2
Given below is another example to add style to the division tag in HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1rem solid green;
margin: 1rem;
padding: 1rem 1rem;
text-align: center;
box-shadow: 2px 2px 20px 23px aquamarine;
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 1rem 1rem;
background-color: #2ecc71;
color: white;
text-transform: uppercase;
text-decoration: underline;
font-family: cursive;
font-size: 1.2rem;
font-weight: bolder;
font-style: italic;
}
</style>
</head>
<body>
<div class='parent'>
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
<div class='division'>div tag 3</div>
</div>
</body>
</html>
Following is the output for the above example program.
Example 3
You can try to run the following code to style HTML element using the <div> tag. The style rule added gets applied to the element with id=”content”. Here id is the CSS Selector.
<!DOCTYPE html>
<html>
<head>
<style>
#container p {
line-height: 15px;
margin: 20px;
padding-bottom: 15px;
text-align: justify;
width: 130px;
color: blue;
}
</style>
<title>HTML div Tag</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div id = "container">
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>
</body>
</html>
Advertisements
The <div> tag is used as the container for the HTML elements. With the help of this tag, we can easily define a section of a HTML Document. It is also used to group large sections of HTML elements together and easily format them. The <div> tag is used with block-level elements.
The <div> tag accepts all the CSS properties and styles the elements in it using attributes like class and id.
Syntax
Following is the syntax for the <div> tag.
<div class='division'>Content…</div>
Example 1
Given below is an example to add style to the division tag in HTML.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .parent { border: 1rem solid green; margin: 1rem; padding: 1rem 1rem; text-align: center; box-shadow: 2px 2px 20px 23px aquamarine; } .division { display: inline-block; border: 1px solid aquamarine; padding: 1rem 1rem; background-color: #2ecc71; color: white; } </style> </head> <body> <div class='parent'> <div class='division'>div tag 1</div> <div class='division'>div tag 2</div> <div class='division'>div tag 3</div> </div> </body> </html>
Following is the output for the above example program.
We can add more styles to the <div> tag.
Example 2
Given below is another example to add style to the division tag in HTML.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .parent { border: 1rem solid green; margin: 1rem; padding: 1rem 1rem; text-align: center; box-shadow: 2px 2px 20px 23px aquamarine; } .division { display: inline-block; border: 1px solid aquamarine; padding: 1rem 1rem; background-color: #2ecc71; color: white; text-transform: uppercase; text-decoration: underline; font-family: cursive; font-size: 1.2rem; font-weight: bolder; font-style: italic; } </style> </head> <body> <div class='parent'> <div class='division'>div tag 1</div> <div class='division'>div tag 2</div> <div class='division'>div tag 3</div> </div> </body> </html>
Following is the output for the above example program.
Example 3
You can try to run the following code to style HTML element using the <div> tag. The style rule added gets applied to the element with id=”content”. Here id is the CSS Selector.
<!DOCTYPE html> <html> <head> <style> #container p { line-height: 15px; margin: 20px; padding-bottom: 15px; text-align: justify; width: 130px; color: blue; } </style> <title>HTML div Tag</title> <link rel = "stylesheet" href = "style.css"> </head> <body> <div id = "container"> <p>Welcome to our website. We provide tutorials on various subjects.</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google