Los sitios web se componen de una serie de piezas individuales, incluyendo imágenes, texto y varios documentos. Estos documentos no sólo incluyen aquellos a los que se puede enlazar desde varias páginas, como los archivos PDF, sino también los documentos que se utilizan para construir las propias páginas, como los documentos HTML para determinar la estructura de una página y los documentos CSS (Cascading Style Sheet) para dictar el aspecto de una página. Esto ahondará en el CSS, cubriendo qué es y dónde se utiliza en los sitios web actuales.

Una lección de historia de CSS

CSS fue desarrollado por primera vez en 1997 como una forma para que los desarrolladores web definieran la apariencia visual de las páginas web que estaban creando. Su objetivo era permitir a los profesionales de la web separar el contenido y la estructura del código de un sitio web del diseño visual, algo que no había sido posible hasta ese momento.

La separación de estructura y estilo permite que el HTML realice más de la función en la que se basaba originalmente – el marcado del contenido, sin tener que preocuparse por el diseño y la disposición de la página en sí, algo comúnmente conocido como el «look and feel» de la página.

El CSS no ganó popularidad hasta alrededor del año 2000, cuando los navegadores web comenzaron a utilizar algo más que los aspectos básicos de fuentes y colores de este lenguaje de marcado. Hoy en día, todos los navegadores modernos soportan todo el CSS Nivel 1, la mayoría del CSS Nivel 2, e incluso la mayoría de los aspectos del CSS Nivel 3. A medida que CSS continúa evolucionando y se introducen nuevos estilos, los navegadores web han comenzado a implementar módulos que traen nuevo soporte CSS a esos navegadores y ofrecen a los diseñadores web nuevas y potentes herramientas de estilismo con las que trabajar.

En (muchos) años pasados, hubo diseñadores web selectos que se negaron a usar CSS para el diseño y desarrollo de sitios web, pero esa práctica casi ha desaparecido de la industria hoy en día. CSS es ahora un estándar ampliamente utilizado en el diseño web y sería difícil encontrar a alguien que trabaje en la industria hoy en día que no tenga al menos un conocimiento básico de este lenguaje.

CSS es una abreviatura

Como ya se mencionó, el término CSS significa «Hoja de Estilo en Cascada». Vamos a desglosar un poco esta frase para explicar más detalladamente lo que hacen estos documentos.

La palabra «hoja de estilo» se refiere al documento en sí mismo (como HTML, los archivos CSS son realmente documentos de texto que pueden ser editados con una variedad de programas). Las hojas de estilo se han utilizado para el diseño de documentos durante muchos años. Son las especificaciones técnicas de un diseño, ya sea impreso o en línea. Los diseñadores de impresión han utilizado durante mucho tiempo hojas de estilo para asegurarse de que sus diseños se imprimen exactamente según sus especificaciones. Una hoja de estilo para una página web sirve para el mismo propósito, pero con la funcionalidad añadida de indicar también al navegador cómo renderizar el documento que se está visualizando. Hoy en día, las hojas de estilo CSS también pueden utilizar consultas multimedia para cambiar la forma en que una página busca diferentes dispositivos y tamaños de pantalla. Esto es increíblemente importante ya que permite que un solo documento HTML sea renderizado de forma diferente según la pantalla que se utilice para acceder a él.

Cascade es la parte realmente especial del término «hoja de estilo en cascada». Una hoja de estilo web tiene la intención de pasar en cascada a través de una serie de estilos en esa hoja, como un río sobre una cascada. El agua del río golpea todas las rocas de la cascada, pero sólo las del fondo afectan exactamente por donde fluirá el agua. Lo mismo ocurre con la cascada de hojas de estilo de los sitios web.

Cada página web se ve afectada por al menos una hoja de estilo, incluso si el diseñador web no aplica ningún estilo. Esta hoja de estilo es la hoja de estilo del agente de usuario, también conocida como los estilos predeterminados que el navegador web utilizará para mostrar una página si no se proporcionan otras instrucciones. Por ejemplo, por defecto los hipervínculos tienen un estilo azul y están subrayados. Estos estilos provienen de la hoja de estilo predeterminada de un navegador web. Sin embargo, si el diseñador web proporciona otras instrucciones, el navegador necesitará saber qué instrucciones tienen prioridad. Todos los navegadores tienen sus propios estilos predeterminados, pero muchos de ellos (como los enlaces de texto subrayados en azul) se comparten en todos o en la mayoría de los navegadores y versiones principales.

Para otro ejemplo de un navegador por defecto, en nuestro navegador web, la fuente por defecto es «Times New Roman» que se muestra en el tamaño 16. Sin embargo, casi ninguna de las páginas que visitamos se muestra en esa familia y tamaño de fuente. Esto se debe a que la cascada define que las segundas hojas de estilo, que son establecidas por los propios diseñadores, para redefinir el tamaño de la fuente y la familia, anulando los valores predeterminados de nuestro navegador web. Cualquier hoja de estilo que cree para una página web tendrá más especificidad que los estilos predeterminados de un navegador, por lo que estos valores predeterminados sólo se aplicarán si su hoja de estilo no los sustituye. Si desea que los enlaces sean azules y subrayados, no necesita hacer nada, ya que es el valor predeterminado, pero si el archivo CSS de su sitio dice que los enlaces deben ser verdes, ese color sustituirá al azul predeterminado. El subrayado permanecerá en este ejemplo ya que no se ha especificado lo contrario.

¿Dónde se utiliza el CSS?

CSS también se puede utilizar para definir cómo deben verse las páginas web cuando se visualizan en otros medios que no sean un navegador web. Por ejemplo, puede crear una hoja de estilo de impresión que definirá cómo debe imprimirse la página web. Debido a que los elementos de la página web como los botones de navegación o los formularios web no tendrán ningún propósito en la página impresa, se puede utilizar una Hoja de estilo de impresión para «desactivar» esas áreas cuando se imprime una página. Aunque no es realmente una práctica común en muchos sitios, la opción de crear hojas de estilo de impresión es poderosa y atractiva (según nuestra experiencia, la mayoría de los profesionales de la web no lo hacen simplemente porque el alcance del presupuesto de un sitio no exige que se realice este trabajo adicional).

¿Por qué es importante el CSS?

CSS es una de las herramientas más poderosas que un diseñador web puede aprender porque con ella se puede afectar toda la apariencia visual de un sitio web. Las hojas de estilo bien escritas se pueden actualizar rápidamente y permiten a los sitios cambiar lo que se prioriza visualmente en la pantalla, lo que a su vez muestra el valor y el enfoque a los visitantes, sin necesidad de hacer ningún cambio en la marcación HTML subyacente.

El principal desafío de CSS es que hay mucho que aprender – y con los navegadores que cambian todos los días, lo que funciona bien hoy puede no tener sentido mañana a medida que se soportan nuevos estilos y otros son abandonados o caen en desuso por una razón u otra.

Debido a que los CSS pueden combinarse en cascada, y considerando cómo los diferentes navegadores pueden interpretar e implementar las directivas de forma diferente, CSS puede ser más difícil de dominar que el HTML simple. CSS también cambia en los navegadores de una manera en la que el HTML realmente no lo hace. Sin embargo, una vez que empiece a usar CSS, verá que aprovechar el poder de las hojas de estilo le dará una flexibilidad increíble en la forma de diseñar páginas web y definir su apariencia. A lo largo del camino, usted amasará una «bolsa de trucos» de estilos y enfoques que han funcionado para usted en el pasado y a los que puede volver a recurrir cuando construya nuevas páginas web en el futuro.

Original de Jennifer Krynin. Editado por Jeremy Girard el 7/5/17