CSS - Hojas de estilo - ¿Qué son las hojas de estilo y por qué son necesarias?

Las hojas de estilo representan un gran avance con respecto a cómo los diseñadores de páginas Web pueden aumentar grandemente su capacidad de mejorar la apariencia de sus páginas.

---

En su origen el Web fue concebido en un entorno científico, como un medio de intercambio de documentación, en el que lo esencial era el contenido, siendo la presentación algo completamente accesorio.

---

|| Cita: ||
|| Pero a medida que el Web era descubierto por toda clase personas como un fantástico medio de difusión, las limitaciones del HTML con respecto al control sobre la presentación se convirtieron en una fuente continua de frustraciones. ||

Francisco Arocena (Webmaestro)
Así se han ido desarrollando “técnicas”, trucos, para evitar las las limitaciones propias de HTML, el problema de estos “trucos” es que no funcionan siempre ni para todos los navegadores, algunos ejemplos son: Utilización de etiquetas no estándar, inventadas por los creadores de algunos navegadores (como Netscape o Explorer). Convertir el texto en imágenes que pudieran controlar. Usar imágenes transparentes para crear espacios en blanco. Uso de tablas para forzar determinadas presentaciones. Utilizar programas o lenguajes ajenos al HTML para conseguir ciertos efectos visuales, etc.

---

Además hay otro aspecto muy interesante de las hojas de estilo, y es que separan por completo la información para la presentación de una página de su contenido, con lo que se facilita mucho el diseño y revisión de las páginas, pues se puede variar la presentación de una página, o de todo el conjunto de ellas, sin cambiar una sola línea del código del HTML.

---

CSS nos permite definir el formato de una web, la apariencia visual: colores, imágenes de fondo, fuentes, márgenes, sangría. Tal y como hemos visto en el manual de html, muchas de estas cosas se pueden hacer con HTML así que para muchos resulta más fácil simplemente seguir con su dreamweaver o su frontpage definiendo la apariencia visual con html en cada documento. Pero la verdad, es que a la larga, cuanod queremos hacer un cambio de diseño, como cambiar la fuente o un simple color de un título, es más que posible que nos veamos obligados a cambiar el <font color> en unas 40 veces por documento en todos los documentos de nuestra página. Y supongamos que nuestra página es pequeña, que tenemos 6 o 7 documentos html, multiplica, tendrías que hacer 240 cambios sólo para cambiar el color de los títulos de rojo a azul. ¿Qué pasaría si en vez de 6 páginas tienes 60? Multiplica.

---

¿Qué pasa si tu jefe te llama un viernes por la tarde, por supuesto a última hora y te dice, la nueva letra corporativa es Tahoma a 13 y toda tu página está en Arial 10? Hay muchos más párrafos de texto que títulos, te enfrentarías a la tarea de tener que cambiar miles de <fonts> y probablemente te hayan fastidiado el fin de semana.

---

Quizás estés pensando que con el tag <basefont> solucionarías el problema, pero aún así tendrías que cambiar ese “tag” en cada una de las páginas del sitio.

---

Imáginate que te tocan un par de cambios de estos a la vez, cambiar los títulos, el color y la letra.

---

Utilizando CSS, simplemente desaparecen. Enseguida veremos cómo y porqué.