Separa el estilo del contenido [Jan. 13, 2012, 4:24 p.m.]
Imagínate que eres el encargado del portal web para una empresa mediana. Cuando hiciste el diseño inicial de la página, decidiste que todos los artículos debían llevar el título en color azul oscuro, de esta manera:
<h1 style="color:darkBlue;">Aquí va el encabezado del artículo</h1>
Dos años después, cuando la página ya tiene miles de artículos publicados, tu jefe te dice que la gente está aburrida del color azul y ahora quiere que todos los títulos cambien a color verde oscuro. ¿Te imaginas la cantidad de trabajo que implicaría abrir cada uno de esos archivos HTML para modificarle el color?
Por supuesto, existe una mejor manera de trabajar con el CSS.
Otras maneras de añadir CSS
En la tarea anterior estuvimos insertando el código CSS dentro del HTML, utilizando la propiedad “style” de cada elemento. Aunque esta es una manera sencilla de añadir CSS, tiene dos grandes problemas:
- Obliga a que el contenido y el estilo siempre estén amarrados
- No permite reutilizar el CSS
Otra manera de incluir CSS en una página web es colocándolo dentro del elemento <head>, de esta manera:
<html>
<head>
<style type="text/css">
h1 {
color: darkBlue;
}
</style>
</head>
Pero una manera inclusive mejor es crear un archivo CSS aparte y simplemente hacer link hacia él desde del HTML, de esta forma:
estilos.css
h1 {
color: darkBlue;
}
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
De esta forma podemos reutilizar nuestro código, ya que todos nuestros archivos HTML pueden apuntar hacia el mismo archivo CSS. Inclusive, si más adelante queremos cambiar el look de nuestra página, ya no tendríamos que editar cada HTML por separado, solo tendríamos que editar el archivo CSS.