Ejemplo IV de Estilos CSS. Definir un Estilo para todas las páginas de la web
Si lo que queremos es que cierto estilo definido por nosotros sea válido en todas las páginas de nuestra web, usaremos este método, la creación de una Hoja de Estilo.
Dividiremos la tarea en tres partes:
1.- Crear la Hoja de Estilo;
2.- Indicar a cada página de nuestra web donde está y como se llama la Hoja de Estilo que debe seguir, y
3.- Aplicar los estilos definidos en la Hoja de Estilo a los elementos de cada Página.
1.- Crear la Hoja de Estilo.
Vamos a crear nuestra Hoja de Estilo con el NotePad de Windows. Una vez abierto escribimos lo siguiente:
p { font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
text-align: justify;
text-indent: 40px;
margin: 10px 10px 10px 10px ;
}
Si ya os habéis mirado bien las lecciones de estilo os sonarán estos terminos. Si no, no os preocupéis. Con este ejemplo solo quiero que veais, a grandes rasgos, como usar las hojas de estilo. Los detalles como las propiedades, etc, las podréis ver mejor en otros ejemplos.
Una vez copiado esto en el Notepad lo guardáis con el nombre "estilo.css" con comillas y todo!! De esta forma evitaréis que el NotePad lo guarde con la extensión .txt que no nos vale. Nosotros lo queremos con extensión .css. Si por cualquier cosa se os guarda con .txt solo tenéis que cambiarle el nombre por estilo.css. Guardarla en la carpeta "ejemplo2".
2.- Asociar la Hoja de Estilo a la Web.
Aunque os parezca un poco fuerte, vamos a hacer la página de este ejemplo "a pelo", es decir, directamente en HTML. ALAAAAA!!! No hombre, no , no os asustéis que es muy fácil, además, alguna vez os he dejado solos? Je je. Eso os ayudará un montón a familiarizaros con el HTML y el CSS.
Para ello usaremos también el NotePad de Windows. Abridlo y escribid (o copiad y pegad los más vaguetes) el siguiente código en la hoja del NotePad:
<head>
<title>Ejemplo dos creatuweb</title>
</head>
<body>
Mi segundo Ejemplo de Estilo
</body>
</html>
Si guardáis este código como "ejemplo2.htm" (con las comillas también, por lo dicho antes) podréis abrirlo luego con vuestro Navegador usual y ver la página como va quedando. Para volver a abrirla con el Notepad solo tenéis que cambiarle la extensión, quitarle .htm y ponerle .txt. Después de retocarla le volvéis a poner .htm para poder verla. Un poco lio, pero es fácil y util.
Si veis esta página con el Navegador (poniéndole la extensión .htm) veréis que es una simple página donde pone "Mi segundo ejemplo de Estilo", sin más. A continuación os muestro como asociarle la hoja de estilo creada antes.
Dentro de la cabecera (entre head y </head), por ejemplo, después del título (tras la línea <title>.....) tenéis que poner el siguiente código:
Quedando el código completo como:
<head>
<title>Ejemplo dos creatuweb</title>
<link href="estilo.css" rel=StyleSheet type=text/css>
</head>
<body>
Mi segundo Ejemplo de Estilo
</body>
</html>
Recordad que, donde pone "estilo.css" se indica la Ruta del Archivo de Estilo, respecto a esa página. en nuestro caso, como tanto la página como la Hoja de Estilo están en la misma carpeta solo hay que indicar estilo.css.
Bien ahora queda el último paso. Decid a los elementos de la página, que tipo de estilo deben adoptar.
3.- Indicar Estilos a los elementos de la página
En la Hoja de Estilo creada antes, habíamos definido un estilo de párrafo (p) y una clase de estilo (.rojo).
Para poner algunas palabras de color rojo, solo hemos de encerrarlas entre las palabras mágicas <span class="clasedeestilo"> y </span>.
En cambio, para que la única línea que tenemos en la web adopte la forma del párrafo definida en la Hoja de Estilo, bastaría con encerrar la frase entre <p> y </p>.
Vamos a retocar el código HTML de nuestro ejemplo. Encerraremos la frase "Mi segundo ejemplo de Estilo" entre las palabras <p> y </p>, de forma que esa frase adoptará el estilo de párrafo definido en la Hoja de estilo.
<title>Ejemplo dos creatuweb</title>
<link href="estilo.css" rel=StyleSheet type=text/css>
</head>
<body>
<p> Mi segundo Ejemplo de Estilo</p>
</body>
</html>
Si comprobáis los efectos de este nuevo código con el navegador, veréis lo que hemos logrado. La frase aparece con unos márgenes, sangria, tamaño de letra y justificación indicada en la Hoja de Estilo.
Ahora vamos a poner las palabras "Ejemplo" y "Estilo" en color rojo, mediante la clase de estilo definida con el nomnre .rojo en la Hoja de Estilo. Como he dicho antes, encerraremos esas palabras entre <span class="rojo"> y </span>. (Observar que aunque en la hoja de estilo las clases aparecen con un punto delante, cuando se les llama desde la página no se le pone el punto). El código para conseguir esto, debe quedar como:
<head>
<title>Ejemplo dos creatuweb</title>
<link href="estilo.css" rel=StyleSheet type=text/css>
</head>
<body>
<p> Mi segundo <span class="rojo">Ejemplo</span> de <span class="rojo">Estilo</span></p>
</body>
</html>
Comprobad lo que hemos conseguido visualizando este código en el Navegador, tal y como os he indicado antes.
Otra cosa que podemos hacer es poner toda esa frase con el formato de párrafo especificado en la Hoja de Estilo, pero además, en rojo. Una opción es esta:
pero se puede simplificar, indicando al párrafo qué tipo de clase de estilo debe adoptar:
De este modo, el párrafo tomará las características definidas tanto en p como en .rojo de la hoja de estilo.
Podéis ahora seguir haciendo experimentos incluyendo en la hoja de estilos mas clases, como por ejemplo:
.amarillo { text-color:yellow ; }
y poner algunas de esas palabras en estos nuevos colores.
Si queréis poner nuevos párrafos solo tenéis que escribir su contenido en una nueva línea y rodearla entre <p> y </p>.
Venga, a hacer pruebas, que esto es muy fácil. Y cualquier duda ... al Foro de Estilo!
Lección II:
