External Stylesheet?, Problem with external stylesheet Options

[sunshine07]

Hello. :) I currently have an embedded style sheet on my site. But, for some reason, when I try to make it an external style sheet, the CSS messes up the whole page. I tried it loads of times, but it always messes up. I don't know if I'm doing something wrong with the code.
So, can someone please try to make the CSS in an external style sheet for me? My site is http://heartbliss.info (As you can see, the CSS is currently embedded, because making it as an external style sheet messes it up.)

[Maccabee]

Make a file called stylesheet.css and put the code

CODE

body {
background-color: #e7e7e5;
font-size: 11px;
font-family: tahoma;
line-height: 20px;
color: #525251;
margin: 0;
padding: 0;
}

#container {
margin: 0px;
}

#content {
width: 460px;
float: left;
margin-top: 200px;
padding: 6px;
background-color: #f6f6f4;
margin-left: 40px;
}

a#hover img {
border: 0px;
border-bottom-style: none;
text-decoration: none;
}

#sidebar {
width: 215px;
margin-left: 530px;
margin-top: 204px;
line-height: 20px;
}

.box {
width: 210px;
background-color: #f6f6f4;
padding: 5px;
margin-bottom: 20px;
}

#navigation {
margin-left: 560px;
margin-top: -370px;
}

a.nav:link, a.nav:active, a.nav:visited {
text-align: left;
display: block;
padding: 5px;
background-color: transparent;
font-family: Georgia;
font-size: 23px;
font-weight: normal;
color: #d8474a;
margin: 3px;
font-style: normal;
}

a.nav:hover {
color: #72b3b7;
text-decoration: none;
}

h1 {
text-align: center;
color: #6C6BBF;
font-family: georgia;
font-size: 25px;
font-weight: normal;
}

h2 {
font-weight: normal;
text-align: right;
color: #DF4337;
font-family: Georgia;
font-size: 18px;
border-right: 1px dotted #DF9237;
padding-right: 4px;
margin-top: 7px;
margin-bottom: 7px;
}

h3 {
margin-top: 7px;
margin-bottom: 7px;
font-weight: normal;
text-align: right;
color: #997766;
font-family: georgia;
font-size: 18px;
border-right: 1px dotted #9BA5BF;
padding-right: 4px;
}

h4 {
font-size: 11px;
font-family: Tahoma, Verdana;
line-height: 20px;
color: #717171;
padding: 5px;
text-align: center;
background: url('http://i26.tinypic.com/6fz3pk.jpg') no-repeat left;
background-position: left;
}

h4:hover {
background-color: #fff;
}

a:link,a:visited,a:active {
text-decoration: none;
cursor: crosshair;
color: #f25063;
font-family: Georgia;
font-size: 11px;
font-style: italic;
}

a:hover {
text-decoration: none;
cursor: crosshair;
color: #72b3b7;
}

b, strong {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #4ebdb4;
}

i, em {
font-family: Georgia;
font-style: italic;
font-size: 11px;
color: #AFA320;
}

u {
font-family: tahoma;
font-size: 11px;
border-bottom: 1px dotted #1eb5c7;
color: #996644;
padding-bottom: 1px;
text-decoration: none;
}

blockquote {
width: 350px;
margin: 8px;
padding: 3px;
background-color: #fff;
border-left: 1px dotted #335DCF;
cursor: default;
font-size: 11px;
}

img a:hover {
text-decoration: none;
}

li {
list-style-image: url(http://i289.photobucket.com/albums/ll238/sunny07_hp/d5.gif);
margin: -2px;
line-height: 20px;
}

img.border {
display: block;
border: 1px solid #DDD;
padding: 3px;
margin-right: 6px;
background-color: #fff;
}

.frame {
padding: 4px;
background-color: #fff;
margin: 4px 8px 4px 8px;
border: 1px solid gray;
color: #000;
}

a.cat:link, .cat:active, .cat:visited {
font-family: Tahoma;
font-size: 11px;
text-transform: uppercase;
text-align: center;
padding: 3px 5px 3px 5px;
margin: 2px 4px 2px 4px;
background-color: #b7dbe2;
border: 1px solid #18b7c1;
color: #3d3512;
}

a.cat:hover {
font-family: Tahoma;
font-size: 11px;
text-transform: uppercase;
padding: 3px 5px 3px 5px;
margin: 2px 4px 2px 4px;
background-color: #cee5e9;
border: 1px solid #18b7c1;
color: #534815;
}

textarea, input, submit {
background-color : transparent;
border : 1px dotted #717171;
font-family : Tahoma;
font-size : 12px;
letter-spacing: 1px;
color: #f26d6d;
padding: 3px;
}

code {
font-size: 11.5px;
font-family: "Courier New";
}

.aff:link, .aff:visited, .aff:active {
display: block;
color: #f0f0f0;
background-color: #d97f76;
padding: 4px;
text-align: center;
margin: 4px;
font: 12px Arial;
font-weight: bold;
cursor: pointer;
}

.aff:hover {
background-color: #adadaf;
text-decoration: none;
}

.twitter {
list-style-image: url('http://i289.photobucket.com/albums/ll238/sunny07_hp/d5.gif');
text-align: center;
font: 10pt tahoma;
width: 200px;
}

Make sure you arent adding <style> or anything like that.

And then put that file in the same folder as your index.php. Then put this code int he HEAD section!

CODE

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

Done.

Reason for edit: Codeboxes, Joseph. CODEBOXES! -Nat

[sunshine07]

Thank you so much, Joseph. :D
I suppose the reason for the messing up was because I added the <style> tag in my external style sheet.
Now it works perfectly! :)

Thanks!

[Mickey]

Topic closed & moved.