CSS Problem with a code.

I have a problem with my website I`m trying to make it work my site is www.theplayerssoul.com it looks wierd some images doesn`t work they are gif and jpg. so that`s not the problem. Well i have a problem how should i fix this? I tried to put the code in home.php but some of the code appears on the site you see. I made a theplayerssoul.css and i put the code in it, into my gallery/css/theplayerssoul.css but how do i like bind it so it shows up in my site.
here is the code

background: #0D0051;
padding: 0;
margin: 0;
color: #00C2E3;
font-family: Arial, Sans-Serif;
font-weight: bold;
font-size: 12px;
scrollbar-3dlight-color: #00C2E3;
scrollbar-arrow-color: #00C2E3;
scrollbar-base-color: #00C2E3;
scrollbar-track-color: #0D0051;
scrollbar-darkshadow-color: black;
scrollbar-face-color: #0D0051;
scrollbar-highlight-color: #00C2E3;
scrollbar-shadow-color: black;
}
input, select, file, textarea {
font-size: 12px;
font-style: normal;
background: #0D0051;
color: #00C2E3;
border: 1px solid #00C2E3;
}
input:focus, select:focus, file:focus, textarea:focus {
background: #0D0051;
color: #00C2E3;
border: 1px solid #00C2E3;
}
h1 {
font-size: 16px;
font-weight: bold;
font-style: normal;
margin: 0px 15px 0px 15px;
}
p {
font-size: 12px;
font-style: bold;
margin: 10px 5px 10px 5px;
}
pre {
font-family: Arial, Sans-Serif;
font-weight: bold;
font-size: 12px;
margin: 0px 15px 0px 15px;
}
a {
text-decoration: none;
color: #0F0FF1;
}
a:hover {
color: #00C2E3;
}
img {
border: 0;
}
table {
table-layout: fixed;
border: 0;
}
td#uppermain {
width: 768px;
height: 29px;
background: #0D0051 url('../images/uppermain.jpg');
background-repeat: no-repeat;
background-position: left top;
}
td#mainleft {
background: #0D0051 url('../images/mainleft.jpg');
background-repeat: no-repeat;
background-position: right top;
}
td#mainright {
background: #0D0051 url('../images/mainright.jpg');
background-repeat: no-repeat;
background-position: left top;
}
td#displayleft {
width: 103px;
height: 123px;
background: #0D0051 url('../images/displayleft.jpg');
background-repeat: no-repeat;
}
td#displayright {
width: 79px;
height: 123px;
background: #0D0051 url('../images/displayright.jpg');
background-repeat: no-repeat;
}
td#displayupper {
width: 98px;
height: 68px;
background: #0D0051 url('../images/displayupper.jpg');
background-repeat: no-repeat;
background-position: left top;
}
td#displaylower {
width: 98px;
height: 33px;
background: #0D0051 url('../images/displaylower.jpg');
background-repeat: no-repeat;
}
td#main {
background: #0D0051 url('../images/border.jpg');
background-repeat: repeat-y;
}
td#mainmiddle {
background: black url('../images/skull.jpg');
background-repeat: no-repeat;
background-position: right bottom;
}
td#lowermain {
width: 522px;
height: 29px;
background: #0D0051 url('../images/lowermain.jpg');
background-repeat: no-repeat;
background-position: left bottom;
}
td#menuright {
width: 21px;
height: 118px;
background: #0D0051 url('../images/menu/menu_right.jpg');
background-repeat: no-repeat;
background-position: left;
}
td#bottom {
width: 522px;
height: 152px;
background: white url('../images/bottom.jpg');
background-repeat: no-repeat;
background-position: left top;
}
.namedate {
color: #00C2E3;
background-color: #0D0051;
border: 1px solid #00C2E3;
padding: 2px;
}
.backgroundfield {
margin-left: 20px;
margin-right: 20px;
border: 1px solid #00C2E3;
padding: 5px;
}

 

To use external CSS check:
http://www.tizag.com/cssT/external.php
or
http://www.ibdjohn.com/
or w3schools
http://www.w3schools.com/CSS/css_howto.asp
-
hope this helps
falcon