Separa el estilo del contenido [Jan. 13, 2012, 9:14 p.m.]

Imagínate que eres el encargado del portal web para una empresa mediana. Cuando se hizo el diseño inicial de la página, se decició 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 forma mejor para trabajar con CSS.

Otra manera 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

La manera recomendada de trabajar con CSS es crear un archivo para almacenar todas las reglas de estilo (con extensión .css) y otro archivo para el contenido (con extensión .html). Luego, para enlazar ambos documentos se agrega el elemento <link> al archivo HTML, de esta forma:

estilo.css

h1 {
  color: darkBlue;
}

index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="estilo.css" />
</head>

Si lo hacemos de esta manera podremos reutilizar código, ya que todos nuestros archivos HTML podrán compartir un mismo archivo CSS. Además, si más adelante queremos cambiar el "look" de nuestra página, ya no tendríamos que editar cada archivo HTML por separado, sino que únicamente editaríamos el archivo CSS.

Separando estilo y contenido

Si agarramos el documento que escribimos en la tarea anterior y separamos el estilo del contenido, debemos quedar con dos archivos como estos:

contenido.html

<html>
<head>
  <meta charset="utf-8" />
  <title>Dándole Estilo al Texto</title>
  <link rel="stylesheet" type="text/css" href="estilo.css" />
</head>

<body>

  <h1>Queremos que el encabezado esté subrayado</h1>

  <p>Este es nuestro primer párrafo. Queremos que tenga alineación a la derecha y que el texto sea en "itálica" de color verde.</p>

  <p>Este es nuestro segundo párrafo. Queremos que tenga alineación justificada y que el texto sea en "negrita" de color rojo. Para ver el efecto de la alineación justificada, tal vez tengas que achicar el tamaño de tu navegador.</p>

</body>

</html>

estilo.css

h1 {
  font-size:1.2em; 
  font-weight:normal; 
  text-decoration:underline;
}


p {
  color:green; 
  text-align:right; 
  font-style: italic;
}


p {
  color:#FF0000;
  text-align:justify;
  font-weight:bold;
}

Sin embargo, si abrimos el archivo en el navegador nos daremos cuenta que los dos párrafos tomaron color rojo y alineación justificada, a pesar que definimos propiedades diferentes para cada elemento <p>. Para corregir este problema debemos comprender cómo funciona el CSS.

Los archivos CSS están compuestos de una serie de reglas con este formato:

	selector {
    propiedad: valor;
}

Lo primero que hace el navegador es buscar todos los elementos que cumplan con los parámetros del selector, para luego aplicarle las propiedades que están entre corchetes. Por ejemplo, la regla:

	h1 {
  font-size:1.2em; 
  font-weight:normal; 
  text-decoration:underline;
}

Le dice al navegador que busque todos los elementos h1 en la página y les aplique

9. Dale Estilo a tu Página Web

Separa el estilo del contenido [Jan. 13, 2012, 9:14 p.m.]