DIV tag in HTML:
- <div> tag means division or section in HTML page
- <div> section works like container (separate set of HTML tags)
- <div> is used to apply styles to specific set of HTML tags using class selector
CSS Padding: It is used to create space around the HTML element content.
| <!doctype html> <html> <head> <style> div { padding : 70px ; border : 1px solid blue ; } </style> </head> <body> <h1> HTML Div – CSS Padding </h1> <div> This div element with padding </div> </body> </html> |
Note: border specification is important for every <div> tag
Simple <div> with background and fore-ground color text:
| <!doctype html> <html> <head> <style> .myDiv{ border : 5px solid red ; background-color : lightblue; text-align : center ; } </style> </head> <body> <h1> Div Tag Example </h1> <div class=”myDiv”> <h1> This is Heading tag </h1> <p> This is paragraph tag </p> </div> <p> Note : This text is outside to div element </p> </body> </html> |
<div> tags mostly used to represent the form in a style:
| <!doctype html> <html> <head> <style> .login{ padding : 10px; border : 5px solid red ; float : left; } .head{ background-color : red; color : white ; padding : 4px; text-align : center; } .sub{ background-color : red; color : white ; font-weight : bold ; } </style> </head> <body> <div class=”login”> <h3 class=”head”> Login Form </h3> <form action=”Login.jsp” method=”post”> <table> <tr> <td> Enter Email : </td> <td> <input type=”email” name=”email”/></td> </tr> <tr> <td> Enter Password : </td> <td> <input type=”password” name=”pwd”/></td> </tr> <tr> <td style=”text-align:center”><input class=”sub” type=”submit” value=”login”/></td> </tr> </table> </form> </div </body> </html> |