CSS DIV Tag
The <div> tag is actually an html tag that defines a division in an HTML document. By creating a division we create a separate section in an html document.
The practical use of the <div> is to format that division using a particular style. Here is an example that shows the usage of the formatting using the div tag
<html>
<head>
<style type="text/css">
div
{
color:blue;
}
</style>
</head>
<body>
<div>
Blue text
</div>
</body>
</html>
|
Notice how the text in between the div tag is displayed in blue. This is the beauty of the creation of division. Let us make use two different div tags - one that applies to the normal div and another that applies to a div id. The second div is used to align the div in the center.
You may like to try this code using online tool here
<html>
<head>
<style type="text/css">
div
{
color:blue;
}
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<div>
Blue text
</div>
<div id="para1">
red text
</div>
</body>
</html>
|
The application of the normal div will now display the text in blue. The second div tag with id ="para1" element will display it in red and will also align it in the center.
You may like to try this code using online tool here
Finally we have an example that shows how use the div tag with id as well as using class ( we hope that this will consolidate your understanding of the id and class that you learned in the last chapters.)
<html>
<head>
<style type="text/css">
div
{
color:blue;
}
#para1
{
text-align:center;
color:red;
}
.para2
{
color:green;
}
</style>
</head>
<body>
<div>
Blue text
</div>
<div id="para1">
red text
</div>
<div class="para2">
green text
</div>
</body>
</html>
|
You may like to try this code using online tool here
In the next page we will learn about some common styling element starting with backgound styling.