We will learn here to create DIV structure. Creating a simple DIV with applying some basic CSS and one line code in HTML page.
Copy the code and paste it on you HTML page or Download Demo Page.
Download Demo Page
Copy the code and paste it on you HTML page or Download Demo Page.
<html>
<head>
<title> My first DIV </title>
<style>
.firstdiv {
float:left;
width:400px;
Height:250px;
padding:10px 10px;
color:#666666;
font-family:Arial;
border:1px solid #cc0000;
}
</style>
</head>
<body>
<div class="firstdiv"> My first DIV </div>
</body>
</html>
<head>
<title> My first DIV </title>
<style>
.firstdiv {
float:left;
width:400px;
Height:250px;
padding:10px 10px;
color:#666666;
font-family:Arial;
border:1px solid #cc0000;
}
</style>
</head>
<body>
<div class="firstdiv"> My first DIV </div>
</body>
</html>
Explanation:
CSS:
Under the head section we have written CSS. Now lets check the explanation of css line by line:| .firstdiv { | = given name starting with the dot (.firstdiv). You can give any name. Dot before the name is given to make it a class. |
| Float:left; | = DIV can be aligned horizontally to left or right by giving float. |
| width:400px; | = given width to DIV |
| Height:250px; | = given specific width |
| padding: 10px 10px; | = Padding is gap/ space between the div border to the div content. 10px 10px, means TOP-bottom and left-right |
| color:#666666; | = this is for the test color |
| font-family:Arial; | = Type of font |
| border:1px solid #cc0000; | = Given border to DIV, border width is 1px, solid displays solid line you can try other element such as dotted, dashed etc, #cc0000 this hexgon color is a border color |
Now lets check the HTML code DIV line:
Added the class "firstdiv" style we created. Applying this class, DIV takes the shape as we have defined in the style / CSS.Download Demo Page
No comments:
Post a Comment