<html>
<head>
<title>Boxes and Boxes</title>
<!-- Here i have used this specific code to link the HTML sheet to the style.css sheet,
this has now allowed both sheets to be able to work together-->
<link rel="stylesheet" text="text/css" href="style.css">
<!--The coding below "</head> is what ends this part of the coding -->
</head>
<body>
<!--The coding below shows where and how i have declared the box ground elements into the second style sheet
I have created an ID which will be the name of the object "Container -->
<div id="Container">Container
<!--This is going to be the block element of the coding that will be within the container-->
<div id="Box">Box1</div>
</div>
</body>
</html>
body{
/*THE CODING BELOW IS SIMPLY SHOWING THE COLOUR OF THE BACKGROUND*/
background:white;
/*THE CODING BELOW SHOWS THE SIZE OF LARGE THE FONT WILL BE*/
font-size:40px;
}
#Container{
/*THE CODING BELOW IS POSITIONING THE CONTAINER TO THE MIDDLE OF THE SCREEN, THAT IS WHAT THE "AUTO" DOES WITHIN THIS CODE*/
margin:auto;
/*THE CODING BELOW IS SIMPLY SHOWING THE COLOUR OF THE BACKGROUND OF THE CONTAINER*/
background:green;
/*THE CODING BELOW IS THE WIDTH OF THE CONTAINER*/
width:375px;
/*THE CODING BELOW IS THE HEIGHT OF THE CONTAINER*/
height:400px;
/*THE CODING SHOWS THE BORDER AND THE CONTENT GAP*/
padding:5%;
/*THE CODING BELOW MAKES THE TEXT BE IN THE MIDDLE OF THE CONTAINER*/
text-align:center;
}
#Box{
/*THE CODING BELOW IS THE POSTIONING OF THE BOX THAT IS WITHIN THE CONTAINER TO BE IN THE MIDDLE*/
margin:auto;
/*THE CODING BELOW IS SIMPLY SHOWING THE COLOUR OF THE BACKGROUND OF THE BOX THAT IS WITHIN THE CONTAINER*/
background:blue;
/*THE CODING BELOW IS THE WIDTH OF THE BOX WITHIN THE CONTAINER*/
width:100px;
/*THE CODING BELOW IS THE HEIGHT OF THE BOX WITHIN THE CONTAINER*/
height:100px;
/*THE CODING BELOW SHOWS THE BORDER AND THE CONTENT GAP*/
padding:30%;
/*THE CODING BELOW SHOWS THE TYPE OF BORDER THAT IS AROUND THE BOX*/
border:dotted;
}
