Div is short form of division, div element gives you the ability to define a section on your webpage. To place elements exactly where you want it.
With div we can easily put our webpages into a neat segment. Not like before that we have a single layout.
For example, maybe you want heading at the left corner of your website or an image at the bottom left or some paragraphs in the middle of your images, you can position them exactly where you want them using *div* element.
And like every other elements, the formula for div is 👇
<div> </div>
Let's do some practicals.
Create a new file and save it with div.html
Copy this 👇 code and paste it in your empty text editor
_____start at <!doctype html>_____
<!doctype html>
<html>
<head>
<title>TopCrix Studio</title>
<style type="text/css">
.blue {color: blue;
}
.red {color: red;
}
div {border: 2px solid red;
position: absolute;
width: 300px;
}
</style>
</head>
<body>
<div>My name is Crix</div>
</body>
</html>
______stop at </html>_______
We now have a box, the text is enclosed inside the box (a.k.a the div) and the box has a border of 2px, it's solid and has a red color.
In other to change the position of the box we need to use coordinates.
The box is stick to the top and left of our webpage, let's say we want to shift it down 40px and 35px to the right.
We need to add the property top and left and the value will be 40px and 35px respectively
Add this 👇 to your CSS, it must be pasted below the width.
That's before or at the top of the last curly bracelet }
You can see that the position of our box is now 40px from the top and 35px from the left.
Now you can see that by changing those coordinates we can move our div anywhere we want.
This is an easy way to use CSS to position elements.
Later on when you're designing a website and maybe you want your logo at the top left and an add at the top right and navigation bar across the top. We use a bunch of different divs in other to make different boxes that we can position anywhere we want.
We going to discuss much on positioning and different types of div in upcoming tutorials.
#StaySafe.. TopCrix Cares!
Bye for now!
