Ya sabemos que podemos insertar las reglas directamente dentro de un elemento de la página web mediante el parámetro style, pero como inconveniente obtenemos un método poco claro y que resulta difícil de mantener. Por tanto, siempre optaremos por separar los estilos del contenido de la página.
Así, los estilos los situaremos en la cabecera de la página, rodeados de una etiqueta HTML denominada <style> con su correspondiente </style>. El ejemplo anterior quedaría integrado en nuestra página de la siguiente manera:
<!DOCTYPE html>
<html>
<head><style type="text/css">
h1 { color: blue;}
.capitulos { font-family: sans-serif; text-decoration: underline; }
#anexos { font-size: 18px; text-align: center; }
</style></head>
<body>Contenido de la página</body>
</html>
Este método es fácil y su mantenimiento es simple, pero si tenemos varias páginas HTML es complicado aplicar en todas el mismo estilo.
En ese caso, sería conveniente cargar un fichero de hojas estilo externo con extensión .CSS
Enlazar un archivo .css
Para que el archivo con los estilos tenga efecto en la página, debemos indicar en la cabecera del archivo .html que se va a tomar ese estilo, mediante la etiqueta <link>, así:
<link rel="stylesheet" href="misestilos.css" type="text/css" media="all">
Cada parámetro tiene su propio significado:
- rel: indica la relación entre el documento y el archivo que se carga; en este caso será su hoja de estilos.
- href: como en los enlaces normales, indica la URL del archivo. Al encontrarse en la misma carpeta, sólo indicaremos el nombre; pero si estuviese en otro lugar o incluso en otro servidor, crearíamos las rutas siguiendo las normas de los enlaces.
- type: indica el tipo de información. Tanto este valor como el de rel, serán siempre iguales.
- media: especifica a qué medio se aplicará la hoja de estilo. En este caso se aplica a todos los medios, pero podríamos tener hojas de estilo diferentes para impresión (print), móviles (handheld), televisiones (tv), etc.
Por tanto, esa línea será la que repetiremos a través de nuestras diferentes páginas, para que tomen la apariencia deseada.
Múltiples hojas de estilo
Un detalle a tener en cuenta es que una misma página web puede emplear varias hojas de estilo diferentes. De hecho es una práctica muy frecuente para separar, por ejemplo, los aspectos relativos a maquetación de los puramente gráficos.
Cuando llegue el momento de preparar la página web, el navegador juntará todos los estilos y los ordenará, para aplicarlos correctamente.
Prioridad en los estilos
Al crear estilos en diferentes lugares, nos surge una duda, ¿qué sucede si definimos un estilo para un párrafo en una página externa, en la propia cabecera de la página y como un estilo interno mediante <style>? ¿Cuál se aplicará?
Las hojas de estilo se denominan "en cascada" precisamente por la forma que tienen de definir su prioridad. Cuando un mismo estilo está definido en varios lugares, se sigue un orden de preferencia muy claro:
- Primero se aplican los estilos de las hojas externas.
- Si en la cabecera de la página se repite alguna propiedad de un estilo, se aplica el de la cabecera, obviando la misma propiedad que estuviese definida en la hoja externa.
- Si en un elemento concreto se ha definido una propiedad específica, se aplica esta última, saltándose las anteriores.
Es decir, se va de mayor a menor, aplicando cada propiedad. Insistimos en lo de la propiedad, ya que podemos encontrarnos con que en la hoja exterior se define el tipo de letra de los párrafos y en el documento interior se define el tamaño. En ese caso se aplicarían las dos propiedades, ya que no hay colisión entre ellas.