Look at the image given below, this is the webpage you have learned to create from the previous post. There is only a box of 600px by 300px in the page. We used a <div> and some simple CSS only to create this box.
From this post you will learn some more customization of the div, that will be so helpful during creating a full webpage later. Our main goal is to create a full functional and standard website that will be responsive also.
This series is not to teach you all of the HTML or CSS and so on. But the most important and essential parts will be discussed. You are requested to comment below for further query and/or suggestion.
However, the box of the page is showing at the left side. Let's see how to center the box.
From this post you will learn some more customization of the div, that will be so helpful during creating a full webpage later. Our main goal is to create a full functional and standard website that will be responsive also.
This series is not to teach you all of the HTML or CSS and so on. But the most important and essential parts will be discussed. You are requested to comment below for further query and/or suggestion.
However, the box of the page is showing at the left side. Let's see how to center the box.
Step 01 Center the <div>
To center the <div>, we have to use margin: auto; with the existing CSS codes. So, now the total codes will be...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iDhali</title>
<style type="text/css">
.container{
width: 600px;
height: 300px;
margin: auto;
background-color: silver;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
After adding margin: auto; the targeted div <div class="container"> will be centered like the image below.
Step 02 Adding border to a div
Now we will add a border to the existing div, so we have to add a new line border: 1px solid #333; After adding this CSS the webpage will look like the image given below.
But the border color is mixing with the background color! So, we will avoid the background color by removing the line background-color: silver;
After removing the line, the webpage will look like...
As I am talking about the border, so I need to show some more customization about border. For example: if you replace the line border: 1px solid #333; to border-top: 1px solid #333; then you will get a border only at the top of the box.
You may also try...
border-bottom: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #333;
But, you need to use only one of them. Margin and Padding will be discussed in the next tutorial.
Let me know your feelings about the writings so that I can understand your expectation and/or satisfaction. Leave a comment below for further query and/or any suggestion.
No comments:
Post a Comment