Welcome to your website development training center.
In this tutorial am going to clear a lot of confusion that you probably have surrounding the div thing that I talked about yesterday.
Div is like boxes that you can place anywhere you want it on your webpage.
But if we have a bunch of boxes and they are all div, how does the browser know what div we want to change it position. The answer is through the use of ID's.
ID is a lot like style but kinda different, we use ID a lot with divs in other to position boxes in different locations.
For example if you have one div and you wanna move it to the top left and another you wanna move to the bottom right, you'd give them different ID's and that will tell your browsers the exact positions you want for both divs.
Let's do some practicals.
Create a new file and save it with id.html
Copy this👇 code and paste it in your empty text editor
_____start from <!doctype html>______
<!doctype html>
<html>
<head>
<title>TopCrix Studio</title>
<style type="text/css">
#ebola {border: 2px solid orange;
position: absolute;
top: 15px;
left: 25px;
}
#corona {border: 2px solid red;
position: absolute;
top: 65px;
left: 5px;
}
</style>
</head>
<body>
<div id="ebola">Ebola is deadly</div>
<div id="corona">Corona is deadliest</div>
</body>
</html>
_____stop at </html>______
To give our divs different ID's we must add harsh sign # in front of our selector. In this way, we have differentiate between the two divs and that moves our two divs to different locations on our webpage.
You have two divs that are basically identical and your browser can't tear them apart.
In other to get them identity, you need to first of all write what you want your ID to be equal, you must give them unique identities and then you write what you want the identity to do.
Whenever something have the identity of ebola, you wanna give it an orange border and put it in the specified position.
Whenever something have the identity of corona you wanna give it a red border and place it in the specified position.
That's the way we can use divs to position different elements around our webpage.
Before, we have one div and we can only do one thing with it but now, we can have countless divs and we can position anywhere we want on our webpage.
Divs are so useful when making a custom layout. We can make one div for a banner to the right and one div for logo in the top left and one div for navigation bar at the bottom left or anywhere we like.
That is how we use ID's to distinguish divs from one another. If this tutorial is confusing, pm me.
