Hola!
Al parecer no has entendido el sentido de los archivos CSS enlazados a través de
link :).
La idea de enlazar 1 o varios archivos CSS a las páginas de tu sitio, es que con un pequeño cambio en el archivo CSS principal estarás modificando todas las páginas que tengan este archivo enlazado. Esa es la idea principal de los estilos CSS y no lo puedes cambiar.
Lo que puedes hacer es:
- Copiar el archivo CSS con nombres distintos y enlazar cada uno de estos a su respectiva página. Por ejemplo, copiar estilos.css y renombrarlo como "contacto.css". Luego cambiar el atributo
href de la etiqueta
link.
No te recomiendo que uses esta forma, pues se pierde la idea principal de los archivos CSS.
- Puedes crear un div contenedor distinto en cada página y sobreescribir los estilos que quieras en este. Este punto es el recomendado y se hace así:
estilos.css#cabecera { background-color: red }
#contenido { background-color: green; }
/* Estilos para Home */
#home #contenido { background-color: blue; }
/* Estilos para Contacto */
#contacto #contenido { background-color: orange; }
etc...
plantilla.html<!DOCTYPE html>
<html>
<link href="estilos.css" ... />
<head>
</head>
<body>
<div id="cabecera">
<header><h1>Bienvenidos a "mi página"</h1></header>
</div>
<div id="home">
<div id="contenido">
<h2>Home</h2>
</div>
</div>
<footer>
<p>Mi pie de página</p>
</footer>
</body>
</html>
contacto.html<!DOCTYPE html>
<html>
<link href="estilos.css" ... />
<head>
</head>
<body>
<div id="cabecera">
<header><h1>Bienvenidos a "mi página"</h1></header>
</div>
<div id="contacto">
<div id="contenido">
<h2>Contacto</h2>
</div>
</div>
<footer>
<p>Mi pie de página</p>
</footer>
</body>
</html>
La idea es que sólo tengas que cambiar el id de la sección y luego definir los estilos para cada una.
Cuando defines estilos, ten en cuenta que os estilos se sobreescriben unos a otros dependiendo del lugar donde aparezcan y los específicos que sean. Esto significa:
- Con
específicos me refiero a que, si yo escribo #contenido { reglas } es menos específico que #home #contenido { reglas }, por lo tanto, este último siempre sobreescribiará al primero (o menos específico).
- Sobre el lugar donde aparezcan, básicamente significa que si defino un estilo en la línea 10 y luego lo redefino en la línea 30, este último sobreescribirá al primero.
- Teniendo en cuenta lo anterior, los estilos se sobreescribirán según el orden de inclusión. El orden es el siguiente (de menor jerarquía a mayor jerarquía):1. Archivos enlazados a través de
link. Estos serán sobreescritos por los que le sigan, incluso por lo que se incluyan en otros
link después del primero.
2. Estilos definidos con la etiqueta
style. Estos sobreescriben a los de archivos enlazados.
3. Estilos definidos en las etiquetas (ejemplo: <p style="color: red">texto...</p>). Estos sobreescriben a todos los anteriores.
Como ves, todo se puede sobreescribir :).
