Asociar Hoja de Estilos

Ahora que ya sabemos crear hojas de Estilo, el siguiente paso es indicarle a cada página dónde se encuentra. Como vimos antes, la Hoja de Estilo puede llamarse como queráis (aunque siempre os he recomendado usar minúsculas y evitar espacios en blanco y símbolos "raros") pero la extensión (las tres letritas que van detras del nombre del archivo) debe ser .css.

Imaginemos que, con la originalidad que nos caracteriza, lo hemos llamado estilo.css. Obviamente tendremos que indicar en cada página la ruta de ese archivo, respecto de esa página y además hay que hacerlo en un sitio y de una forma determinada.

Llamaremos a dicho archivo con la siguiente línea:

<link rel="StyleSheet" media="screen" type="text/css" href="estilo.css">

línea que tendremos que incluir dentro de la cabecera de cada una de las páginas que queramos que use esa Hoja de Estilos, es decir, entre los <head> y </head> de esas páginas. No olvides respetar las comillas.

En dicha línea os he marcado subrayado lo que debería ser la ruta del archivo estilo.css respecto de esa página en concreto. Supongo que habéis sido buenos y buenas y os habéis empapado la sección Rutas de la Enciclopedia de ComoCrearTuWeb. Si no es así, echarle un vistazo que es muy muy importante. Os recomiendo usar rutas relativas.

Os recuerdo de todos modos que si por ejemplo, el archivo estilo.css está en la misma carpeta que la página, simplemente tenéis que poner el nombre del archivo estilo.css. Si en cambio la página está en una carpeta llamada mibiografia y el archivo estilo.css está en la carpeta anterior a esta (es decir, fuera de "mibiografia") tendréis que poner ../estilo.css. De todas formas, en la Enciclopedia, en la sección Rutas, está explicado todo esto completa y claramente.

Pues listo. Una vez que habéis insertado esa línea en cada una de las páginas en las que queréis utilizar esos estilos (que seguro que son en todas) el paso siguiente será aprender a utilizarlos, es decir, como indicar a la página que un elemento debe mostrarse con un estilo de los definidos en la Hoja de Estilos. Vamos a verlo en la siguiente lección.

Ya estáis apunto de pasar de ser Webmastercillos a ser WebSuperMasters!! je je je. Tiembla Bill Gates!!!