Separa el estilo del contenido [Jan. 14, 2012, 3:35 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 decidió 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 mover todas las reglas de estilo a un archivo aparte, con extensión .css. Luego, dentro del archivo HTML debemos crear un enlace hacia el CSS, de esta forma:

estilo.css

h1 {
  color: darkBlue;
}

index.html

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

Usando este método, todos nuestros archivos HTML pueden apuntar hacia el mismo CSS, lo cual nos ahorra tiempo y trabajo. 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, primero debemos comprender cómo funciona el CSS. Los archivos CSS están compuestos por una serie de reglas con este formato:

selector {
  propiedad: valor;
}

Lo primero que hace el navegador es buscar todos los elementos que cumplan con el selector, para luego aplicarle las propiedades que están entre llaves.

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 las propiedades font-size, font-weight y text-decoration.

Lo que está sucediendo con los párrafos es que hay dos reglas con el mismo selector. En este caso, la última regla sobre-escribe a la primera. Entonces, ¿cómo podríamos definir una regla para que se aplique al primer párrafo pero no al segundo?

IDs y Clases

Para diferenciar entre elementos similares, en HTML se utilizan los atributos "id" y "class". Por ejemplo, podríamos hacer lo siguiente:

<p id="parrafo1">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 class="parrafo2">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>

Luego, en nuestro archivo CSS podemos modificar los selectores:

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


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


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

Puedes observar que nuestros selectores ahora tienen este formato:

Un numeral (#) seguido del nombre del id
Un punto (.) seguido del nombre de la clase

Y si ahora abrimos el archivo en el navegador, debemos ver algo como esto.

Tanto los id como las clases se pueden utilizar para identificar elementos. La diferencia es que el id debe ser único en toda la página. Es decir, no deben existir dos elementos con el mismo id en un archivo HTML. Las clases, en cambio, se pueden utilizar para cualquier cantidad de elementos.

En esta tarea hemos cubierto muchos conceptos. Asegúrate de leer todo con calma y trata de hacer pruebas para ver si entendiste todo correctamente.

Antes de pasar a la siguiente tarea, agarra cualquier archivo que tenga HTML y CSS combinado y sepáralo para que el CSS quede en un archivo aparte.

9. Dale Estilo a tu Página Web

Separa el estilo del contenido [Jan. 14, 2012, 3:35 p.m.]