What is Div Tag and How nested Div Tag work in HTML and using CSS.

Today in this tutorial, we are going to learn how nested div tag works.

Div Tag and Example of  Nested Div Tag in HTML

Div tag used to create a section in a web page and it is block level element it means next element sits in the next line. In the below example nested div are used with a class attribute for styling using internal CSS.

In div tag that contain ‘class A’ is used to create rectangle of height 100px, width 400px with color aqua. Another div tag is created inside div tag with ‘class B’ created rectangle of height of 50% and width of 50%. Height and width of this div tag are taken reference of a div tag with ‘class A’ since this div tag is parent of div tag (class B). Similarly, another div tag is created with ‘class C’ with reference to div tag (class B).

As shown in code first div tag reference of web page since body tag is immediate parent of div tag with ‘class A’ while other div tag takes reference of immediate div and show output according to that.



Also,

<html>
<head>
    <title>CSS</title>
    
    <style>
        div.A{
            background-color: aqua;
            height:100px;
            width: 400px;
        }
        div.B{
            background-color: green;
            height: 50%;
            width:50%;
        }
        div.C{
            background-color: yellow;
            height: 50%;
            width: 50%;
        }
         </style>
    </head>
    <body>
    <div class="A"><div class="B"><div class="C"></div></div></div>
    </body>
</html>

Output:

nested div - div inside div

 

Check out other posts as well:

What is CSS and difference between CSS and CSS3
Make Grayscale or Black and White Image using CSS

Leave a Reply

Your email address will not be published. Required fields are marked *