 |
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- i have to use this code to be able to use the CSS stylsheet and edit the boxes, it links the style.css sheet that I created to be able used-->
<title>Page Title</title>
</head>
<title>Page Title</title>
</head>
<body>
<!-- This is where I have declared the box and it is to group block elements to be used in CSS, I have given the id for it 'container'-->
<div id="container">Container
<!-- This is where I have declared the box and it is to group block elements to be used in CSS, I have given the id for it 'container'-->
<div id="container">Container
<!-- this is the block element that will be contained inside the container-->
</body>
</html>
</html>
body
{
background: black; /*background colour of
the website is black*/
}
#container
{
color: red; /*colour of the box is red*/
text-align: center; /*text that is in hte
box is centered*/
width: 100px; /*the outside box is 100
pixels wide*/
height: 100px; /*the outside box is 100
pixels tall*/
border-style: solid; /*the border is solid
black*/
margin: auto; /*the container is set to the
middle of the screen because the margin is auto*/
background: white; /*background colour of
the box is white*/
padding: 1%; /*in between the border and
the content it leaves a gap*/
}
#box
{
color: black; /*this is the box that is
within the container, the border is coloured black*/
text-align: center; /*The text ‘box’ has
been centred into the centre of the box*/
width: 50px; /*the outside box is 100
pixels wide*/
height: 50px; /*the outside box is 100
pixels tall*/
border-style: dashed; /*the border is
styled to be dashed and not solid*/
margin: auto;/*the container is set to the
middle of the screen because the margin is auto*/
background: white; /*background colour of
the box is white*/
padding: 1%; /*in between the border and
the content it leaves a gap*/
}
