Wednesday, 4 December 2013

Basic of creating a DIV

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.

<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