#header{
width:100%; /* This adjust the width of the header*/
height:40px; /* This adjust the height of the header*/
background:Yellow; /* This changes the colour of the header*/
text-align:center; /* This centers the text of the header*/
color:Black; /* This is the colour of the text header*/
}
#container{
margin:auto; /* This creates the margin for the container creatiung the gap between the boxes*/
background:Black; /* This is simply the colour of the container*/
width:600px; /* This adjust the width of the container*/
height:600px; /* This adjust the height of the container*/
padding:1%; /* This sets the padding of the container*/
text-align:center; /* This centers the container*/
}
#box1{
padding:2%; /* This sets the padding of the box giving it a gap between the box and text*/
width:300px; /* This adjust the width of the box*/
height:300px; /* This adjust the height of the box*/
background:white; /* This is simply the colour of the box*/
border:dotted; /* This sets the border to dotted*/
border:white; /* This is simply the colour of the dots of the border border*/
margin:auto; /* This creates the margin for the box*/
}
<!DOCTYPE html>
<html>
<head>
<title>Box</title><!-- This is the title of the entire html-->
<link rel="stylesheet" type="text/css" href="style.css" <!-- This references the css-->
</head>
<body>
<div id="header"><h1>Box</h1></div> <!-- This is the heading-->
<div id="container"><!-- This declares the container-->
<div id="box1">Hello I am doing my p2 now, hopefully its good enough</div> <!-- This creates the box and also includes the text within the box-->
</div>
</body>
</html>
