CSS DIV

December 12, 2015 by writer

Filed under HTML & CSS

Last modified June 15, 2016

CSS DIV

Introduction:

            Div is expanded as Division and is used to divide a webpage into various divisions. For every section different style of formatting is used. This can be done using CSS. The <div> tag is used to group block-elements to format them with CSS. The block of contents is given within the <div> and </div>. It is supported by all the browsers.

 

An example : The following code displays the use of div.

<!DOCTYPE html>

<html>

<body>

<div class = “large”>

This is the first section of the webpage.

</div>

<div class=”format”>

This is the second section of the webpage.

</div>

</body>

</html>

 

.large{

color: “red”;

font-family: “arial”;

font-size:12;

}

.format{

color:”blue”;

font-family:”calibri”;

font-style:”bold”;

}

In this code, the class large is linked with the first division of the page. The formatting styles given in that code of segment is applied to the content in the first section. The output of the code will be :

 

OUTPUT :

This is the first section of the webpage.

This is the second section of the webpage.

 

A <div> tag inside another <div> :

            In some cases ,a <div> tag can be placed inside another <div> tag. This will divide one big section into various subsections. For every subsection, a unique formatting style can be applied or we can apply the same formatting to the sections and its subsections.

 

Example : The below given code, explains the working of <div> inside another <div>

 

<!DOCTYPE html>

<html>

<body>

<div>

<div>

<h2> First Division </h2>

</div>

<div>

<h3> Second Division </h3>

</div>

</div>

</body>

</html>

 

The output for this code will be :

First Division

Second Division

Creating a layout:

div can be used to create webpage layouts as it easily divided the webpage into various sections and subsections. Also, every div or section can be easily positioned with the style sheet.

Example:

The following example explains the use of div to create layouts.

 

<html>

<body>
<div>

<h1>Heading</h1>
</div>
<div>
Chennai<br>
Bangalore<br>
</div>
<div>
<h1>Chennai</h1>
<p>
Chennai is the capital city of Tamil Nadu. It is the most popular city in the South India. It is a metropolitan city and has a variety of places to enjoy and have fun.
</p>

<h1>Bangalore</h1>
<p>
Bangalore is the capital city of Karnataka. It is called the Garden city of India. It is a metropolitan city and has a variety of places to enjoy and have fun.
</p>
</div>
</body>

 

 

The output of this code will be:

 

Heading

Chennai

Bangalore

Chennai

Chennai is the capital city of Tamil Nadu. It is the most popular city in the South India. It is a metropolitan city and has a variety of places to enjoy and have fun.

Bangalore

Bangalore is the capital city of Karnataka. It is called the Garden city of India. It is a metropolitan city and has a variety of places to enjoy and have fun.

Leave a Comment