<!DOCTYPE html><html>
<head>
<title>Page Title</title>
<!--This is the coding that links the stylesheet to the html because it is used for editing the boxes.
<link rel="stylesheet" text="text/css" href="style.css">
</head>
<body>
<!--This gives it an ID so it can be be used so the right box could be edited in terms of width and height-->
<div id="container">Container
<!--This is the block element which will be cointaining the block element-->
<div id="box1">content</div>
</div>
</body>
</html>
body{
background:black;/*this is the background colour*/
font-size:50px;/*this is the font size of the text*/
}
#container{
margin:auto;/*this is the gap between the box and the other boxes within the edge of the page */
background:orange;/*this is the background colour */
width:300px;/*this is the size of the box container box width*/
height:300px;/*this is the size of the box container box height*/
padding:1%;/* it between the borded and the content gap*/
text-align: center;/* this makes the text at the center*/
}
#box1{
margin:auto;
background:yellow;/*this is the background colour */
width:200px;*this is the size of the box container box width*/
height:200px;/*this is the size of the box container box height
padding:1%;/* This is the gap between the edge and the box*/
border: groove;/* this makes the text at the center*/
}
No comments:
Post a Comment