css box model and wrapper practice

<html>



<head>

<title>My web page</title>



<style type="text/css">

/* Comments in CSS begin and end with a forward slash and a starburst */

/* Everything inherits properties & values from the body unless otherwise specified */

body {
        background-color: orange; /* change this color */
        font-size: 13px;
        font-family: Consolas;
        color: green;
}

#wrapper /* a wrapper section is commonly used to be the overall page "container" that holds everything on the page */
{
        background-color: #ffffff; /* change this color */
border-color: #7d6b72; /* change this color */
border-style: dotted; /* change this style */
border-width: 5px; /* change this width */
margin-top: 0px; /* distance from top of page */
        margin-right: auto; /* this tells the browser to center the page and determine equal margins from the left & right */
        margin-bottom: 0px; /* distance from bottom of page */
        margin-left: auto; /* this tells the browser to center the page and determine equal margins from the left & right */
        padding: 5px; /* to give some breathing room so content is not right up against edges */
        height: 100%; /* this is included so the wrapper will take up the entire page */
        width: 1200px; /* you can change this value; obviously your background image shouldn't be wider than this */
}

h1 {
        background-color: #FFF59D; /* change this color */
border-color: #7d6b72; /* change this color */
border-style: dashed; /* change this style */
border-width: 5px; /* change this width */
margin-top: 0px; /* distance from top of page wrapper */
        margin-right: 100px; /* distance from right of page wrapper; change this value */
        margin-bottom: 0px; /* distance from bottom of page wrapper */
        margin-left: 100px; /* distance from left of page wrapper; change this value */
        padding: 10px; /* padding around the headline; change this value */
        width: 300px; /* this is how wide the section is around the headline; change this value */
        height: 60px; /* this is how tall the section is around the headline; change this value */
font-size: 24px;
        font-family: Consolas;
        color: purple;
        text-shadow: 1px 1px #cccccc; /* size of shadow and color */
}

h2 {
        background-color: #B2EBF2; /* change this color */
border-color: #000000; /* change this color */
border-style: groove; /* change this style */
border-width: 5px; /* change this width */
margin-top: 0px; /* distance from top of page wrapper */
        margin-right: 30px; /* distance from right of page wrapper; change this value */
        margin-bottom: 0px; /* distance from bottom of page wrapper */
        margin-left: 200px; /* distance from left of page wrapper; change this value */
        padding: 4px; /* padding around the headline; change this value */
        width: 300px; /* this is how wide the section is around the headline; change this value */
        height: 50px; /* this is how tall the section is around the headline; change this value */
        font-size: 18px;
        font-family: Consolas;
        color: green;
}

p {
background-color: #F8BBD0; /* change this color */
border-color: #C2185B; /* change this color */
border-style: ridge; /* change this style */
border-width: 6px; /* change this width */
margin-top: 0px; /* distance from top of page wrapper */
        margin-right: 350px; /* distance from right of page wrapper; change this value */
        margin-bottom: 0px; /* distance from bottom of page wrapper */
        margin-left: 50px; /* distance from left of page wrapper; change this value */
        padding: 4px; /* padding around the paragraph; change this value */
        width: 100px; /* this is how wide the section is around the paragraph; change this value */
        height: 20px; /* this is how tall the section is around the paragraph; change this value */
        font-size: 14px;
        font-family: Consolas;
        color: #000000; /* this is black */
}

img {
background-color: #CE93D8; /* change this color */
border-color: #4A148C; /* change this color */
border-style: double; /* change this style */
border-width: 3px; /* change this width */
margin-top: 0px; /* distance from top of page wrapper */
        margin-right: 200px; /* distance from right of page wrapper; change this value */
        margin-bottom: 0px; /* distance from bottom of page wrapper */
        margin-left: 200px; /* distance from left of page wrapper; change this value */
        padding: 4px; /* padding around the image; change this value */
}

/* Links */

/* a normal link before it is clicked on */
a:link
{
text-decoration: none;
color: purple;
}

/* a link after it has been clicked on */
a:visited
{
text-decoration: none;
color: blue;
}

/* what the link looks like when a mouse is on it */
a:hover
{
text-decoration: underline;
color: red;
}

/* what the link looks like the moment it is clicked */
a:active
{
text-decoration: underline;
color: green;
}

</style>



</head>

<body>

<div id="wrapper">

<h1>My largest headline</h1><br>

<h2>My slightly smaller headline</h2>

<p>A paragraph</p>

<p>A link to <a href="http://youtube.com">Youtube</a>.</p><br>
<img src="http://www.mhswebdesign.com/wp-content/uploads/2012/10/halloween-pug1.gif" />

</div>

</body>

</html>