¿Qué es CSS y para qué sirve?

¿Qué es CSS y para qué sirve?

CSS es el lenguaje que se utiliza para dar estilo a las páginas web. Cuando una persona abre un sitio en el navegador no ve el código: ve colores, letras de distintos tamaños, botones, menús, imágenes bien ubicadas y espacios ordenados. Toda esa apariencia visual no la decide el azar ni el navegador por su cuenta, sino un conjunto de reglas escritas en CSS, las siglas en inglés de Cascading Style Sheets, que en español se traduce como hojas de estilo en cascada. Junto con HTML, CSS forma parte de la base sobre la que se construye la gran mayoría de los sitios de internet, y comprenderlo resulta indispensable para quien quiera crear, mantener o analizar una página web.

En este artículo se explica qué es CSS, en qué se diferencia de HTML, de qué maneras se puede aplicar a una página, cuál es su sintaxis básica, cuáles son las propiedades más utilizadas, qué significa el diseño responsivo y qué papel cumplen los frameworks como Bootstrap.

Qué significa CSS

Las siglas CSS corresponden a Cascading Style Sheets, expresión que se puede traducir como hojas de estilo en cascada. Cada parte del nombre describe una característica del lenguaje. Una hoja de estilo es un conjunto de reglas que indica cómo debe verse un documento. La palabra "cascada" se refiere a la forma en que el navegador combina y resuelve las reglas cuando varias coinciden sobre el mismo elemento: las declaraciones se heredan de los elementos superiores, se combinan entre sí y, cuando entran en conflicto, se aplican según un orden de prioridad muy definido, parecido al recorrido de una cascada. De ahí que el valor de una regla pueda verse modificado por otra regla más específica escrita más adelante.

Conviene aclarar desde el principio que CSS no es un lenguaje de programación. Con él no se escriben condiciones, ciclos ni cálculos, como se haría con JavaScript o con Python. CSS es un lenguaje de estilo, también llamado lenguaje de presentación: su única tarea es describir cómo se ve y cómo se organiza el contenido de una página. Esta distinción es útil para los principiantes, porque define expectativas realistas sobre lo que permite lograr cada tecnología.

Qué hace HTML y qué hace CSS

Para entender qué es CSS conviene compararlo con HTML, el lenguaje con el que se escribe el contenido de las páginas. HTML se encarga de la estructura y del significado: define los títulos, los párrafos, las listas, las imágenes, los enlaces y los formularios. Le indica al navegador, por ejemplo, que una frase es un título y que otra es un párrafo. CSS, en cambio, se encarga de la presentación: define cómo se ven esos títulos y esos párrafos, con qué color, con qué tipo de letra, con qué tamaño, con qué márgenes y en qué posición de la pantalla aparecen.

Una analogía sencilla ayuda a fijar la idea. Pensemos en una casa: el HTML sería la estructura, es decir, las paredes, las columnas, los techos y la distribución de las habitaciones, porque sin esa estructura la casa no existe. El CSS sería la decoración: la pintura de las paredes, el piso, la iluminación y los muebles, porque todo eso define cómo se ve la casa, aunque no sostiene la construcción. También se puede comparar HTML con el esqueleto de una persona y CSS con la ropa: el esqueleto sostiene el cuerpo y define su forma básica, mientras que la ropa es lo primero que perciben los demás. Una página moderna necesita los dos lenguajes: una página con HTML pero sin CSS se muestra como un documento de texto simple, sin colores ni distribución, muy parecido a los primeros sitios de internet de los años noventa.

Cómo se aplica CSS a una página web

Existen tres formas de aplicar CSS a una página y cada una ocupa un lugar distinto dentro del proyecto. Las tres producen el mismo resultado visual en el navegador, pero cambian la organización del código y la facilidad con la que después se puede mantener.

• CSS en línea: las reglas se escriben directamente dentro de la etiqueta HTML, por medio del atributo style. Por ejemplo, un párrafo puede llevar style="color: blue;" y ese párrafo en particular se mostrará con texto azul. Sirve para cambios muy puntuales, pero mezcla la presentación con el contenido y vuelve el código difícil de mantener cuando la página crece.
• CSS interno: las reglas se colocan dentro de un bloque style que se ubica en la sección head del documento HTML, es decir, en la parte superior del archivo. De esta manera, todo el estilo de una página queda reunido en un solo lugar, aunque sigue viviendo dentro del mismo archivo y solo se aplica a esa página.
• CSS externo: las reglas se guardan en un archivo aparte con extensión .css, por ejemplo estilos.css, y ese archivo se enlaza desde el documento HTML mediante una etiqueta link. Así, un mismo archivo de estilos puede controlar la apariencia de muchas páginas a la vez.

En los proyectos reales se recomienda casi siempre el CSS externo, porque separa el contenido de la presentación: los cambios de diseño se hacen en un solo archivo y se reflejan en todo el sitio, el código queda más ordenado y el navegador puede guardar el archivo en su memoria caché para que las páginas carguen más rápido. Los tres métodos conviven en la práctica, pero el externo es la base de las buenas prácticas del desarrollo web.

La sintaxis básica de CSS

La unidad fundamental de CSS es la regla, y todas las reglas siguen la misma estructura. Primero se escribe un selector, que indica a qué elementos de la página se aplicará el estilo. Después se abren unas llaves y, dentro de ellas, se escriben una o más declaraciones separadas por punto y coma. Cada declaración está formada por una propiedad, dos puntos y un valor. Escrita en texto plano, la forma general es esta: selector { propiedad: valor; }.

Por ejemplo, la regla p { color: blue; } indica que todos los párrafos de la página deben mostrar su texto en color azul. En esa regla, la letra p es el selector y apunta a las etiquetas de párrafo de HTML; color es la propiedad, que define el color del texto; y blue es el valor elegido. Si además se quisiera un texto más grande, bastaría con agregar otra declaración dentro de las mismas llaves: p { color: blue; font-size: 20px; }.

Los selectores pueden nombrar una etiqueta directamente, como en los ejemplos anteriores, pero también pueden ser más específicos. Una clase se escribe con un punto antes del nombre, como .destacado, y sirve para aplicar el mismo estilo a varios elementos que comparten esa clase. Un identificador se escribe con el signo numeral, como #menu, y sirve para apuntar a un elemento único dentro de la página. Gracias a esta flexibilidad, CSS puede estilizar desde una sola palabra hasta secciones completas de un sitio.

Las propiedades de CSS más utilizadas

CSS ofrece cientos de propiedades, pero la mayor parte de los diseños cotidianos se resuelve con un grupo reducido de ellas. La siguiente tabla resume las más comunes, indica qué hace cada una y muestra un ejemplo de valor que pueden recibir:

Las propiedades margin y padding forman parte del llamado modelo de caja, una idea central de CSS según la cual cada elemento de una página se comporta como una caja rectangular compuesta por cuatro partes: el contenido, el espacio interior llamado padding, el borde y el espacio exterior llamado margin. Entender este modelo ayuda a anticipar por qué un elemento ocupa más o menos espacio del esperado y a corregir con precisión la distribución de una página.

Qué es el diseño responsivo

Hoy las páginas se visitan desde pantallas de muchos tamaños: teléfonos, tabletas, computadoras portátiles y monitores grandes. El diseño responsivo es la práctica de crear páginas que se ven y funcionan bien en todos esos dispositivos, ajustando de forma automática la distribución, el tamaño de las letras y la visibilidad de los elementos según el ancho de la pantalla. Sin diseño responsivo, una página pensada para computadora se ve diminuta, desordenada o con barras de desplazamiento laterales cuando se abre en un teléfono.

La herramienta principal que ofrece CSS para lograr este comportamiento son las media queries, que en español se conocen como consultas de medios. Una media query es una regla especial que aplica ciertos estilos únicamente cuando se cumple una condición sobre el dispositivo, casi siempre relacionada con el ancho de la pantalla. En texto plano, una media query se escribe así: @media (max-width: 768px) { selector { propiedad: valor; } }. Esto significa que los estilos que están dentro de las llaves solo se aplican cuando la pantalla mide 768 píxeles de ancho o menos, que es el caso típico de una tableta o de un teléfono en posición vertical. Gracias a esta técnica, un mismo documento HTML puede mostrar un menú horizontal amplio en una computadora y un menú compacto y apilado en un teléfono, sin necesidad de crear dos versiones de la página.

Además de las media queries, el diseño responsivo se apoya en otras herramientas de CSS, como las unidades de medida relativas, que se calculan a partir del tamaño de la pantalla o de la letra base, y los sistemas de maquetación flexbox y grid, que permiten reorganizar filas y columnas según el espacio disponible. En conjunto, estas herramientas hacen que el contenido se adapte al dispositivo en lugar de obligar al usuario a ampliar o a desplazarse para leer.

Qué son los frameworks de CSS y qué papel juega Bootstrap

A medida que un sitio crece, escribir todas las reglas desde cero puede volverse lento y repetitivo. Por eso existen los frameworks de CSS: conjuntos de estilos ya preparados que ofrecen clases y componentes listos para usar, como botones, formularios, menús, tarjetas y sistemas de columnas. En lugar de escribir el estilo de cada elemento, el desarrollador agrega a las etiquetas HTML las clases que ofrece el framework y el diseño aparece de inmediato, con una apariencia consistente en todo el proyecto.

Bootstrap es el framework de CSS más conocido y utilizado del mundo. Nació como un proyecto interno de Twitter y se publicó como herramienta libre en 2011. Entre sus ventajas están su sistema de cuadrícula de doce columnas, que facilita distribuir el contenido en filas y columnas que se reacomodan solas en pantallas pequeñas, y su colección de componentes listos para usar, como botones, formularios, menús de navegación y ventanas modales. Al estar construido sobre CSS, todo lo que se aprende sobre este lenguaje se aplica también dentro de Bootstrap.

Usar un framework acelera el desarrollo y garantiza consistencia, pero tiene contrapartidas: si no se depuran los estilos que no se usan, la página puede cargar más peso del necesario; los sitios construidos con el mismo framework tienden a parecerse entre sí, y el control fino del diseño queda limitado por lo que ofrece la herramienta. Por eso la recomendación habitual es aprender primero CSS puro, para entender qué ocurre detrás de cada clase del framework, y elegir según el proyecto: CSS directo para páginas simples y muy personalizadas, y un framework cuando el tiempo es corto o el sitio necesita muchos componentes estándar.

Conclusión

CSS es el lenguaje que convierte la estructura desnuda de HTML en las páginas visuales que los usuarios ven todos los días. Definir qué es CSS, distinguirlo de HTML, conocer las tres formas de aplicarlo, dominar su sintaxis de selector { propiedad: valor; }, manejar propiedades como color, background, font-size, margin, padding y display, y comprender el diseño responsivo y las media queries son los primeros pasos de cualquier persona que quiera dedicarse al desarrollo web o simplemente entender cómo funciona un sitio. El siguiente paso práctico es abrir la vista de desarrollo de cualquier navegador, inspeccionar un elemento y observar en vivo qué reglas de CSS le dan forma. Esa curiosidad por lo que ocurre detrás de la pantalla es, en el fondo, la mejor manera de aprender este lenguaje.