Friday 12 February 2016
Friday 5 February 2016
p2
#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> |
 | |||||
 | |||||
 | |||||
| ||||||
| ||||||
| ||||||
#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>
Subscribe to:
Posts (Atom)