¿Cómo puedo integrar este código CSS a esta tabla HTML?

[TheMadGlover]

Buenos días/tardes/noches.
Estoy creando una página en Google Sites por un trabajo que me pidieron en la Universidad, quiero personalizarla lo mas que pueda. En una de las subpáginas inserté una tabla y ahora quiero aplicarle un fondo degradado con CSS pero no se como integrarlo al HTML. Me harían un gran favor si me resuelven este problema.
Aquí dejo los códigos.

CSS

Código:

background: #9dd53a; /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZDUzYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ExZDU0ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzgwYzIxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3Y2JjMGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */ 
background: linear-gradient(to right, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1 ); /* IE6-8 */

HTML

Código:

<table border="1" bordercolor="#6C540A" cellspacing="0" style="line-height:0.8;font-size:10pt;border-collapse:collapse;border-color:rgb(108,84,10);border-width:2px">
<tbody>
<tr>
<td style="width:245px;height:228px">&nbsp;
<div style="display:block;margin-right:auto;margin-left:auto;text-align:center"><a href="https://sites.google.com/a/uabc.edu.mx/a-traves-de-los-beatles/please-please-me/The%20Beatles%20-%20Please%20Please%20Me.jpg?attredirects=0" imageanchor="1"><img border="0" height="199" src="https://sites.google.com/a/uabc.edu.mx/a-traves-de-los-beatles/please-please-me/The%20Beatles%20-%20Please%20Please%20Me.jpg?height=199&amp;width=200" width="200"></a></div>
</td>
</tr>
<tr>
<td style="width:245px;height:668px"><br>
<font color="#45818e" size="4">
CANCIONES</font><br>
<br>
Cara A<br>
<br>
<font><font color="#ff9900" size="3"><span style="line-height:1.3">1. I Saw Her Standing There</span></font><br>
</font>&nbsp; &nbsp;<span style="font-size:x-small;line-height:1.3;font-style:italic">McCartney-Lennon</span>
<blockquote style="margin:0 0 0 40px;border:none;padding:0px"><span style="line-height:1.3"><font size="1"><br>
</font></span></blockquote>
<font color="#ff9900" size="3">
2. Misery</font><br>
&nbsp; &nbsp;<span style="font-size:x-small;font-style:italic;line-height:0.8">McCartney-Lennon</span>
<blockquote style="margin:0 0 0 40px;border:none;padding:0px"><font size="1"><br>
<br>
</font></blockquote>
<font color="#ff9900" size="3">3. Anna (Go To Him)</font><br>
<span style="line-height:0.8"><font size="2">&nbsp; &nbsp;</font></span><span style="font-size:x-small;font-style:italic;line-height:0.8">Alexander</span><br>
<br>
<br>
<font color="#ff9900" size="3">4. Chains</font><br>
<font>&nbsp; &nbsp;<i style="font-size:x-small;line-height:0.8">Goofin-King</i></font><br>
<br>
<br>
<font color="#ff9900" size="3" style="line-height:0.8">5. Boys</font><br>
<font style="line-height:0.8"><i><font size="2">&nbsp; &nbsp;</font><font size="1">Dixon-Farrel</font></i></font><br>
<br>
<br>
<font color="#ff9900" size="3" style="line-height:0.8">6. Ask Me Why</font><br>
<font size="2" style="line-height:12px">&nbsp; &nbsp;</font><font size="1" style="line-height:0.8;font-style:italic">McCartney-Lennon</font><br>
<br>
<br>
<font color="#ff9900" size="3" style="line-height:0.8">7. Please Please Me</font><br>
<font size="2" style="line-height:12px">&nbsp; &nbsp;</font><font style="line-height:0.8"><font size="1" style="font-style:italic">McCartney-Lennon</font><br>
<br>
<br>
<font size="2">Cara B</font><br>
<br>
<font color="#ff9900" size="3">1. Love Me Do</font><br>
<font size="2">&nbsp; &nbsp;</font><font size="1"><i>McCartney-Lennon</i></font><br>
<br>
<br>
<font color="#ff9900" size="3">2. P.S I Love You</font><br>
<font size="2">&nbsp; &nbsp;</font><i><font size="1">McCartney-Lennon</font></i><br>
<br>
<br>
<font color="#ff9900" size="3">3. Baby It's You</font><br>
<font size="2">&nbsp; &nbsp;</font><i><font size="1">David-Williams-Bacharach</font></i><br>
<br>
<br>
<font color="#ff9900" size="3">4. Do You Want To Know A Secret</font><br>
<font size="2">&nbsp; &nbsp;</font><i><font size="1">McCartney-Lennon</font></i><br>
<br>
<br>
<font color="#ff9900" size="3">5. A Taste Of Honey</font><br>
<font size="2">&nbsp; &nbsp;</font><i><font size="1">Scott-Marlow</font></i><br>
<br>
<br>
<font color="#ff9900" size="3">6. There's A Place</font><br>
<font size="2">&nbsp; &nbsp;</font><i><font size="1">McCartney Lennon</font></i><br>
<br>
<br>
<font color="#ff9900" size="3">7. Twist And Shout</font><br>
<font size="2">&nbsp; &nbsp;</font><font size="1"><i>Medley-Russell</i></font></font></td>
</tr>
</tbody>
</table>
<br>
<div dir="ltr">

<br>
</div>

De antemano, muchas gracias.

[pzin]

Pues pon el código en el atributo style de la tabla como tienes hecho con lo demás.

[TheMadGlover]

Eso sí lo sé. Lo que no sé, es ¿en que parte del HTML tengo que poner las etiquetas?

Gracias.

[KManus88]

No se si entiendo bien, lo que vos querés es no usar la etiqueta style, hacer todo en un css y que el html lo lea?

Para eso tenes q pegar dentro del <head> lo siguiente

Código HTML:

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

Tenes que cambiar style.css por la direccion donde se encuentra guardado tu css.

Saludos

[TheMadGlover]

Iniciado por KManus88

No se si entiendo bien, lo que vos querés es no usar la etiqueta style, hacer todo en un css y que el html lo lea?

Para eso tenes q pegar dentro del <head> lo siguiente

Código HTML:

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

Tenes que cambiar style.css por la direccion donde se encuentra guardado tu css.

Saludos

Hola.
Eso es exactamente lo que quiero (etiqueta style) pero no sé en que partes del HTML agregar class y como es la etiqueta en que debe estar el CSS.

Ahora, haciendo eso, ¿el CSS puedo ponerlo justo abajo del HTML?

Gracias.

[pzin]

Tienes un pequeño cacao mental. Yo te diría que te leyeras un manual, como los de http://librosweb.es, y ahí te solucionan dudas tan básicas como donde declarar estilos.