Separa el estilo del contenido [Jan. 13, 2012, 8:42 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 forma:

<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 el HTML, de esta forma:

estilo.css

h1 {
  color: darkBlue;
}

index.html

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

De esta forma podemos reutilizar nuestro código, ya que nuestros archivos HTML pueden compartir el 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;
}

Al parecer

9. Dale Estilo a tu Página Web

Separa el estilo del contenido [Jan. 13, 2012, 8:42 p.m.]