Tengo serios problemas al intenar pasar ciertos códigos de CSS embebidos en el HTML sin alterar algo y no sé como hacerlo, ¿sabría alguien hacer ésto?
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="hoja de estilo.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="horizontalnav">
<div class="navlinks">
<ul>
<li><a href="http://www.youtube.com/watch?v=GBEoXPLmcOo&feature=fvst">artistas</a></li>
<li><a href="http://www.youtube.com/watch?v=qYeGjkL_bA4&feature=related">deportistass</a></li>
<li><a href="http://www.youtube.com/watch?v=0rTd5JrIbT8">perritos</a></li>
<li><a href="http://www.youtube.com/watch?v=ECkPVTZlfP8&feature=related">caninos</a></li>
</ul>
</div>
</div>
<div id="leftnav">
<form action="http://www.google.es/search" method="get">
<p><label for="q"><strong>Search:</strong></label></p>
<input type="text" id="q" name="q" size="10" maxlength="50" value=""/>
<input type="submit" name="Buscar"/>
<br></br>
<p><label for="ficheros"><strong>Upload:</strong></label></p>
<input type="file" id="fichero" name="ficheros" size="2" maxlength="20" value=""/></form>
</div>
<div id="rightnav">
<label for="nombre"><strong>Nombre: </strong></label>
<input type="text" name="nombre" id="nombre" size="10" maxlength="20" value=""/><br></br>
<label for="contraseña"><strong>Contraseña: </strong></label>
<input type="password" name="contraseña" id="contraseña" size="10" maxlength="20" value=""/><br></br>
</div>
<div id="body"><align="center">
<p align="center">WE LOVE DOGS!</p>
<p><img src="Imagenes/perro.jpeg" alt="perro" width="576" height="316" align="center" longdesc="Imagenes/perro.jpeg" /></p>
</div>
<div id="footer">@copyright 2010</div>
</body>
</html>
y este es el CSS
@charset "utf-8";
/* CSS Document */
#container {
width: 900px;
}
#header {
width: 900px;
height: 100px;
position: relative;
background-image: url(imagenes/headerbg.jpg);
border-bottom: 2px solid #000000;
}
#header a {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
font-family: Verdana;
font-size: 14px;
}
#header a:visited {
color: #000000;
text-decoration: underline;
font-weight: bold;
}
#header a:hover {
color: #cc0000;
text-decoration: none;
font-weight: bold;
}
.HorizLinks {
position: absolute; top: 77px; left: 180px;
}
.HorizLinks ul {
margin: 0px;
}
.HorizLinks li {
margin: 0px 15px 0px 0px;
list-style-type: none;
display: inline;
}
#horizontalnav {
width: 900px;
height: 30px;
position: relative;
background-color: #F2D6AF;
border-bottom: 2px solid #000000;
}
.navlinks {
position: absolute; top: 4px; left: 140px;
}
.navlinks ul {
margin: auto;
}
.navlinks li {
margin: 0px 18px 0px 0px;
list-style-type: none;
display: inline;
}
.navlinks li a {
color: #000000;
padding: 5px 12px 7px;
text-decoration: none;
font-size: 16px;
font-family: Verdana;
}
.navlinks li a:hover{
color: #ffffff;
background-image: url(images/BGhover.jpg);
/*If you want to use a color for the background instead replace above line with background-color: [insert color here with # sign in front];*/
text-decoration: underline;
}
#header p {
color: #000000;
font-family: Arial;
font-weight: bold;
}
#leftnav {
float: left;
width: 140px;
height: 400px;
background-color: #F8AA3C;
border-right: 1px dashed #694717;
}
#rightnav {
float: right;
width: 140px;
height: 400px;
background-color: #F8AA3C;
border-left: 1px dashed #694717;
}
#body {
margin: auto;
width: 600px;
padding: 10px 0px 0px 10px;
background:#C3F
}
#body p {
font-weight: bold;
font-size: 16px;
}
#footer {
clear: both;
background-color: #D1C0A7;
}
Muchas gracias