how to use div tag in html and css with examples

 

Tamizh Tech Tutorial

................


div tag

  • div stands for division and it is a type of container tag 
  • It is mainly used to create a division or section in HTML page
  • It is styled easily by using its tagname or class or id attribute.
Syntax
    <div>
    
    </div>

I. EXAMPLE OF CREATING RECTANGULAR SHAPE USING <DIV> TAG

NOTE
  • In order to create a square shape, the height and width attributes should be equal size.
1. SOURCE CODE
<html>
    <head>
        <title>TODO supply a title</title>
        <style>
            div
            {
                border: 4px double black;
                width: 300px;
                height:300px;
                padding:9px;
                background-color: #6639b7;
                color:white;
                border-radius: 5px;
            }
            p
            {
                font-size: 21px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>Hello World</p>
        </div>
    </body>
</html>

2. OUTPUT

II. EXAMPLE OF CREATING CIRCLE SHAPE USING <DIV> TAG

NOTE
  • In order to create a circle shape, the height and width attributes should be equal size and border radius should be 50 %.
1. SOURCE CODE

<html>
    <head>
        <title>HTML Div Tag</title>
        <style>
            div
            {
                width: 350px;
                height: 350px;
                background-color: #205081;
                color:white;
                padding: 9px;
                border: 4px solid red;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
    <center>
        <div>
            <h3>Welcome</h3>
            <p>Test</p>
        </div><br>
        </center>
    </body>
</html>

2. OUTPUT





Comments

Popular posts from this blog

Vivo V30 Pro 5G

Xiaomi 14 - Features, Price

Oppo F25 Pro 5G Review - Features, Price