Can someone explain this to me?
<!DOCTYPE html>
<html>
<head>
<title>Practice jQuery slider and gallery</title>
<style>
html, body{
width: 100%;
height: 100%;
margin: 0 auto;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:12px;
background-color: #DEDEDE;
color: red;
}
#header{
margin: 0 auto;
width: 860px;
height: 95px;
background-color: #FAF6FA;
background: #ffffff;
}
#container{
position: absolute;
top: 0px;
left: 80px;
width: 885px;
height: 970px;
background-color: #EFEFEF;
border-style:solid;
border-width:1px;
border-color: silver;
}
#slideShowBox{
position: relative;
width: 640px;
height: 500px;
margin: 150px auto 0;
background-color: #F5F5F5;
border:1px solid #FFFFFF;
-moz-box-shadow:0 0 22px #111;
-webkit-box-shadow:0 0 22px #111;
box-shadow:0 0 22px #111;
}
#slideShowBoxControlls{
position: relative;
width: 640px;
height: 34px;
margin: auto 2px auto;
border: 1px solid red;
}
#arrowLeft{
background: url('cssimages/arrowLeft.png') no-repeat;
width: 32px;
height: 32px;
border: 1px solid green;
display: inline-block;
float: left;
}
#arrowRight{
background: url('cssimages/arrowRight.png') no-repeat;
width: 32px;
height: 32px;
border: 1px solid green;
display: inline-block;
float: right;
}
h1{
font: 30px "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
text-align: center;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Practice jQuery Slider and Gallery</h1>
</div>
<div id="slideShowBox">
</div>
<div id="slideShowBoxControlls">
<div id="arrowLeft"></div>
<div id="arrowRight"></div>
</div>
</div>
</body>
</html>

Help











