Creando la hoja de estilos
La Hoja de Estilo no es una página web, por lo que no empieza ni acaba con <html>. Además no tiene ni cabecera (Head) ni cuerpo (Body) por lo que son mucho más sencillas. Lo que os indico ahora es el código que va a tener nuestra Hoja de Estilo. No os preocupéis si no entendéis algo, pues lo iré explicando conforme lo vayamos utilizando. Además, está bien explicado en la sección Curso de Estilos CSS a la que puedes acceder desde las lenguetas de arriba de ComoCreaTuWeb si quieres más información.
Abre el archivo estilo.css pulsando dos veces sobré él y copia en él todo el siguiente código:
(Más adelante veremos como simplificar este trozo de código para que ocupe menos diciendo lo mismo)
A la hora de copiarlo quizas os vendría bien saber que:
- No se deben separar 17 de px. Es decir, vale 17px(junto) pero no vale 17 px (con un espacio en medio).
- Los signos { y } se escriben pulsando, a la vez, "Alt Gr" más una de las dos teclas que hay junto al Enter o Intro ,que llevan su símbolo correspondiente a esos corchetes o paréntesis.
Una vez copiado guardarla y cerrarla. Si ahora abrís la página index.htm con el DreamWeaver y hacéis "Vista Previa" para ver como se vería en Internet, (pulsad en "Archivo" + "Vista Previa en Explorador" + "Navegador" + "escoged uno"), veréis como sale el fondo de color naranja.
Además hemos definido otras características que más adelante os comentaré. Lo que quiero que sepáis es que a partir de ahora en lugar de tener que definir esas propiedades o características, solo tendremos que añadir la línea que añadimos antes entre <head> y </head> en cada una de las páginas que creemos más adelante. Esto, sin duda, es un gran ahorro de esfuerzo y espacio, entre muchas otras cosas.
Pasamos a comentar por encima el código de la Hoja de Estilos. Las líneas primera y última, que como véis, empiezan y acaban con /* y */, no son más que comentarios nuestros. Se usan para aclarar lo que estamos haciendo y no influyen en nada más. Si queréis poner algún comentario escribid esos símbolos al principio y al final del comentario.
La línea que comienza con body.... indica que el color de fondo de la página (del Body de la página) será naranja (orange). Si deseáis otro color (que es lo más seguro) podéis cambiar la palabra "orange" por otra que corresponda a algún color válido. Estos colores válidos se muestran en la sección "Los Colores" de ComoCreaTuWeb si no recuerdo mal.
Las líneas que comienzan con a:... indican que los enlaces (o vínculos) se mostraran en negrita (bold) sin subrayado (text-decoration: none) y de colores distintos según el estado del enlace, es decir, azul (blue) en estado normal (link) y en enlaces previamente visitados (visited); rojo (red) cuando se pase el ratón por encima (hover) y verde (green) cuando el enlace esté pulsado (active). Si queréis otros colores ya sabéis lo que hacer.
La linea que empieza con P.... indica las características del texto de la web. El tipo de letra, el tamaño (17px) (deben ir seguidos el número y las letras "px"), que se represente justificado (text-align:justify), que la primera línea de cada párrafo este metida hacia la derecha un cierto espacio, también llamado "sangria" (text-indent:20px), y que cada párrafo se separe del resto una distancia de 7px (pixeles) por arriba y abajo y de 8px por los lados.
Más adelente iremos añadiendo más estilos, conforme nos vayan haciendo falta.
Por ahora vamos a escribir en index.htm un párrafo más largo que el que tenemos para comprobar lo de la primera línea (hemos dicho que tenía una sangria de 20px) y añadiremos un enlace para verificar que se muestra con los colores indicados, pero todo esto, en la página siguiente, que esta ya esta muy llena, je je je.
Lección II:
