Div element
What is a `<div>` Element?
The <div> element is a block-level container in HTML used to group together related content. It does not have any specific semantic meaning but is widely used for styling and layout purposes.
Purpose of `<div>` Element
- To create sections of content that can be styled with CSS.
- To organize the HTML structure for better readability and maintainability.
Basic Syntax
<div class="classname">
Content goes here.
</div>
Example
HTML file
<html>
<head>
<title>Div element</title>
<link rel="stylesheet" href="divstyles.css">
</head>
<body>
<div class="box1">
<p>This program is free software; you can redistribute it
and/or modify it under the terms of the GNU General Public
License as published by the Free Software Foundation; either
version 3 of the License, or at your option any later version.</p>
</div>
<div class="box2">
<p>This program is free software; you can redistribute it
and/or modify it under the terms of the GNU General Public
License as published by the Free Software Foundation; either
version 3 of the License, or at your option any later version.</p>
</div>
</body>
</html>
CSS file
div.box1{
background-color: aqua;
width:500px;
height:400px;
margin: 50px;
padding:30px;
border-style:solid;
border-width: 10px;
border-color: red;
float:left;
}
div.box2{
background-color: violet;
width:300px;
height: 200px;
margin: 40px;
padding: 20px;
border-style:dashed;
border-width:7px;
border-color:green;
float:left;
}