3. Maneras de incluir los estilos CSS

3.3. CSS en un archivo externo

Imaginemos que nuestro sitio web tiene más de una página (lo más habitual). Con el sistema anterior, me vería obligado a decir que los párrafos son rojos en todas y cada una de mis páginas. Si más adelante quisiese que en lugar de ser rojos fuesen azules, tendría que editar todas mis páginas y cambiar el color en cada una de ellas.

Parar evitar esto, podemos incluir todas las definiciones de apariencia en un archivo CSS externo.

Queremos que los párrafos sean rojos en todas nuestras páginas, no solo en una, de manera que creamos un documento CSS (vamos a llamarle, por ejemplo, “styles.css”) y lo guardamos. El contenido de nuestro archivo sería:

p {
    color : red;
}

Y en nuestro archivo HTML, dentro de la etiqueta HEAD, “llamamos” a ese archivo (lo incluimos):

<!DOCTYPE html>
<html>
    <head>
        <title>Mi página</title>
        <link href="ruta_hasta_nuestro_archivo/styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <p>Soy un párrafo de prueba.</p>
    </body>
</html>

Como vemos, se ha utilizado la etiqueta LINK para hacer referencia al archivo CSS externo, y el valor del atributo HREF es la ruta hasta nuestro archivo CSS.

Ventajas de hacerlo así: imaginemos que nuestro sitio web tiene 25 páginas y que la apariencia de todas ellas está definida por el mismo archivo CSS. Si queremos que los párrafos sean azules en lugar de rojos, no tendríamos más que editar el archivo “styles.css”. Haciendo un solo cambio ("red" por "blue"), habríamos modificado el color de todos los párrafos de las 25 páginas. Y eso es solo un ejemplo, porque hemos dicho que en CSS se define todo (desde dónde están los elementos -arriba, abajo, derecha... - hasta sus tamaños y colores), de manera que modificando un único archivo CSS podríamos cambiar todo el diseño de nuestro sitio web.

Una ventaja adicional: el navegador “cachea” (memoriza) estos archivos, y haciéndolo así, solo cargamos el archivo styles.css una vez. Después, el navegador se da cuenta de que ya tiene su contenido, y no vuelve a descargárselo. Así nuestras páginas cargan más rápido y consumimos menos ancho de banda.