December 10, 2015

Using DIV tag in your Web Page

A DIV tag is a division of your web page. It can be the header area , the main content section or the footer at the bottom of your web page.  The content  section of your web  page can be defined by a separate  DIV. We use DIV tag  to make the content organized and more easily readable. 

I will create a div and with a paragraph tag inside the DIV. Let us also decorate the div by giving a class to it using a little CSS.

Let us see how to use the DIV tag with an example:
HTML
                 <html>
                  <body>

                  <div>
                    <p> Let us see how to use the DIV tag with an example:</p>
                    </div>

        <div class="orange">
        <p>An Orange color DIV tag. Fill up with your content here inside this div.</p>
        </div>  <!--We end the div here-->
       
        <div class="purple">
        <p>A Purple color DIV tag. Fill up with your content here inside this div.</p>
        </div> <!--We end the div here-->

                </body>

                </html>

CSS
       .orange {
        text-align:center;
        color: white;
        background-color: orange;
        width: 600px;
        height: 20px;
        padding: 20px;
        }

        .purple {
        text-align: center;  
        color: white;
        background-color: purple;
        width: 650px;
        height: 20px;
        padding: 20px;
        }


RESULT


An Orange color DIV tag. Fill up with your content here inside this div.

A Purple color DIV tag. Fill up with your content here inside this div.


END...

No comments :

Post a Comment