Esto lo podemos hacer de 2 formas que son las siguientes:
-Definiendo el estilo dentro de nuestra plantilla.
La forma de hacerlo seria difiniendo los estilos dentro de las etiquetas <head></head> de nuestra plantilla.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>plantilla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>plantilla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
AQUI ES DONDE IRIAN LAS DEFINICIONES DE ESTILO
</head>
Pero esta forma tiene un problema.Cuando nuestra web este compuesta por 200 paginas(por ejemplo), si nosotros quisiéramos cambiar algún estilo tendríamos que ir pagina a pagina modificando el estilo que queremos modificar en nuestra web.
La otra forma de hacerlo seria definiendo los estilos en un archivo ajeno a nuestra plantilla y referenciando a este archivo dentro de la plantilla.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>plantilla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="nombre de archivo.css" rel="stylesheet" type="text/css">
</head>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>plantilla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="nombre de archivo.css" rel="stylesheet" type="text/css">
</head>
De esta forma si nosotros quisiéramos modificar un estilo solo tendriamos que modificarlo en nuestra hoja de estilos y automáticamente se modificaría en
todas las paginas de nuestro sitio web, ademas de hacer menos pesada nuestra web ya que no tendríamos que usar el codigo en cada una de las paginas
web que componen nuestro sitio.
Si por el contrario solo quisiéramos un estilo concreto para un párrafo de 1 o 2 paginas solamente, lo podríamos hacer como hemos dicho en el
primer método, pero siendo para alguna pagina de nuestro sitio web en concreto.
Vamos a pasar a hacer nuestro archivo de estilos css.
Abrimos el bloc de notas y llamamos al archivo como queramos nosotros usaremos en el ejemplo estilo.css(que original). En primer lugar escribiremos lo siguiente:
/*cuerpo de pagina*/
Todo lo que pongamos entre /* y */ no es mas que para información nuestra de el código que estamos definiendo, no va a salir nada representado en nuestra plantilla.
Lo primero vamos a definir el cuerpo de la pagina y para ello escribiremos el siguiente código:
/*cuerpo de pagina*/
body {
background: #E7E7E7 ;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
background: #E7E7E7 ;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
A continuación vamos a definir las etiquetas <h1> <h2> y <h3> y pondremos en nuestro archivo lo siguiente:
/*---etiquetas H---*/
h1 {
color: #9A1212;
font-size:18px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}
h2 {
color: #9A1212;
font-size:12px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}
h3 {
color: #9A1212;
font-size:10px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}
color: #9A1212;
font-size:18px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}
h2 {
color: #9A1212;
font-size:12px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}
h3 {
color: #9A1212;
font-size:10px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}
De esta forma ya tendríamos editadas nuestras etiquetas principales.Los valores que os he puesto son orientativos modificar y hacer pruebas con los valores
para ponerlos a vuestro gusto y acorde a vuesra web.
A continuación vamos a definir la visualización de los enlaces que hagamos añadiendo el siguiente código a la etiqueta body.
body {
background: #E7E7E7 url('images/body.jpg') top left;
font-size: 14px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
a {color: #c43300;}
a:hover {color: #9a1212;
font-weight:bold;}
a:visited {color: #ff0000;}
background: #E7E7E7 url('images/body.jpg') top left;
font-size: 14px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
a {color: #c43300;}
a:hover {color: #9a1212;
font-weight:bold;}
a:visited {color: #ff0000;}
La etiqueta a hace referencia a los enlaces <a href y tal y tal>.
Vamos a pasar a describir cada una de ellas:
a {color: #c43300;} Es el enlace que hagamos. En este caso solo le hemos definido el color pero podéis definirle tamaño, tipo de letra en fin lo que queramos.
a:hover {color: #9a1212; font-weight:bold;} Aquí le decimos lo que queremos que haga cuando pasemos el ratón por encima del enlace. En este caso le hemos dicho que cuando pase el ratón por encima nos muestre un color diferente y negrita.También podríamos añadir text-decoration: underline; para que nos muestre subrayado.
a:hover {color: #9a1212; font-weight:bold; text-decoration: underline;}
También podemos poner una imagen que tengamos hecha para los enlaces como en el menú de esta web sustituyendo underline por la ruta a una imagen.
a:visited {color: #ff0000;} Este nos indica cuando el enlace haya sido visitado que en este caso le hemos dicho que nos muestre otro color diferente al normal.
También podríamos añadirle A:ACTIVE { propiedades que queramos} cuando se pulse sobre el enlace.
Hemos puesto body { que es el nombre del cuerpo y abierto la llave para darle las indicaciones.
Background es el fondo y #e7e7e7 es el color que queremos que salga en el fondo. Esto cada uno puede ir probando hasta dar con el color a su gusto.
Si quisiéramos de fondo una imagen pondríamos la linea de la siguiente forma:
background: #E7E7E7 url("ruta donde tengamos guardada la imagen.Por ejemplo images/nombre de archivo.gif") top left;
Vemos que ademas hemos añadido top left; Esto es donde queremos alinear la imagen, dándole el valor right la alinearíamos a la derecha o center si
la queremos centrada.
Font-size: es el tamaño de la fuente. Este valor lo hemos puesto en pixeles (px), pero se puede poner también en porcentaje y de alguna forma mas.
Nosotros para no liarnos mucho ahora que empezamos a dar nuestros primeros pasos en css lo haremos con pixeles y podéis comentar cualquier duda que tengáis en el foro.
Font-family: es el tipo de letra que queremos que aparezca.Es recomendable poner varias separadas por comas para que en caso de que alguien use un navegador que
no reconoce alguna fuente, Tenga varias opciones. De lo contrario si solo ponemos una y ese navegador no dispone de esa fuente, nos mostrara una pagina sin texto.
Color: Indica el color que queremos para el texto. Como en background pondremos el valor que mas se amolde a nuestra web.
Y por ultimo padding y margin son los margenes. Padding es el vertical y margin el horizontal.
¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ FIRMA ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
Webmaster de Todo-Mods -- Webmaster de Todoelbarco.com -- Webmaster de NosQuejamos.com
-------------------------------------------------------------------------------
Muchas gracias Esnola, la info me servira de mucho 
