From the previous posts, you have learned to create a simple webpage. But our goal is to crate a full functional webpage. That's why we need to know to use the <div> tag. Like all other tags, every opening <div> tag will be ended with a closing </div> tag.
A <div> tag is nothing so special till using CSS (Cascading Style Sheets) for it. So we have to use CSS also. However let's follow the steps below to add a CSS Style Sheet with our existing webpage and to format <div> differently.
Step 01 Remind the basic codes we have used before
Let's remember the codes again we have used to create a simple webpage before. But, there is nothing inside the <body> and </body> tags here.
N.B. Only the texts and/or contents inside the <body> and </body> tags will be displayed on a web browser.
N.B. Only the texts and/or contents inside the <body> and </body> tags will be displayed on a web browser.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iDhali</title> </head> <body> </body> </html>
Step 02 Now add a <div> tag inside the <body> and </body> tags
Now we will add a <div> tag inside the <body> and </body> tags. But the opening <body> tag will be with an attribute class=" " and the value of the class may be anything you like. For example: the code will be like...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iDhali</title> </head> <body> <div class="container"> </div> </body> </html>
Still now the above code will display nothing on the webpage. But if you keep any text inside the <div> and </div> tags, then the texts will be displayed as usual.
Step 03 Let's add some CSS in the page
Now we will add some CSS codes to style the <div> according to our wish. Look, I have added a class with the value container to target the <div> by CSS. Let's look the codes given below.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iDhali</title>
<style type="text/css">
.container{
width: 600px;
height: 300px;
background-color: silver;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
You have already noticed that I have added 7 new lines before the closing </head> tag. These are the CSS codes that will make the <div> visible in silver color and 600 X 300px in size.
After opening the HTML document in a web browser you will get an silver colored box of 600px by 300px.
Things that you should know
01. The CSS code will go inside the <head> and </head> tags.
02. CSS codes basically goes in another file named style.css, then we have to link that .css file using a line like <link rel="stylesheet" type="text/css" href="css/style.css"> and this line will also go inside the <head> and </head> tags.
03. But when we will keep the CSS codes into the HTML page, then the CSS codes will go inside the tags <style> and </style>
Description about the newly added 7 lines are given below
<style type="text/css"> is the sixth line of the above HTML document, that is used to wrap all the CSS codes. Besides </style> is the closing tag for the 6th line. All the CSS codes must be inside <style type="text/css"> and </style> tags.
.container is the 7th line of the HTML document, that is used to target the DIV with class container. Just after .container there is an opening curly brace { and at the 11th line there is also a closing curly brace }. All the customization for the div will be inside these two curly braces.
N.B. Not only using class like <div class="container">, but also we may use id like <div id="container"> to target a <div>. But then we have to use #container instead of .container to customize.
The lines 8, 9 and 10 are very simple and descriptive. The 8th line says that the width of the div will be 600px, the 9th line says that the height of the div will be 300px and finally the 10th line says that the background color of the div will be silver.
N.B. I have used silver color, you may use another color like red, green, blue etc. And most importantly you can use color code instead of the color name. For example: #d0d0d0 is the color code for silver color. Let's know the basic color codes.
More customization of a div will be described in the next post. Stay tuned to read the next post. Must leave a comment if it is helpful for you.
After opening the HTML document in a web browser you will get an silver colored box of 600px by 300px.
Things that you should know
01. The CSS code will go inside the <head> and </head> tags.
02. CSS codes basically goes in another file named style.css, then we have to link that .css file using a line like <link rel="stylesheet" type="text/css" href="css/style.css"> and this line will also go inside the <head> and </head> tags.
03. But when we will keep the CSS codes into the HTML page, then the CSS codes will go inside the tags <style> and </style>
Description about the newly added 7 lines are given below
<style type="text/css"> is the sixth line of the above HTML document, that is used to wrap all the CSS codes. Besides </style> is the closing tag for the 6th line. All the CSS codes must be inside <style type="text/css"> and </style> tags.
.container is the 7th line of the HTML document, that is used to target the DIV with class container. Just after .container there is an opening curly brace { and at the 11th line there is also a closing curly brace }. All the customization for the div will be inside these two curly braces.
N.B. Not only using class like <div class="container">, but also we may use id like <div id="container"> to target a <div>. But then we have to use #container instead of .container to customize.
The lines 8, 9 and 10 are very simple and descriptive. The 8th line says that the width of the div will be 600px, the 9th line says that the height of the div will be 300px and finally the 10th line says that the background color of the div will be silver.
N.B. I have used silver color, you may use another color like red, green, blue etc. And most importantly you can use color code instead of the color name. For example: #d0d0d0 is the color code for silver color. Let's know the basic color codes.
More customization of a div will be described in the next post. Stay tuned to read the next post. Must leave a comment if it is helpful for you.
« Previous Tutorial
Next Tutorial »
Advertisement
