CSS

CSS (Cascading Style Sheets, en español «hojas de estilo en cascada») es el lenguaje que se utiliza para dar estilo visual a una página web: colores, tipografías, tamaños, espaciados, márgenes y la disposición de cada elemento en pantalla.

Sirve para separar el contenido de una web (que se escribe en HTML) de su apariencia, de forma que puedas cambiar el diseño sin tocar la estructura.

Dicho de forma sencilla, si HTML es el esqueleto de una web, CSS es la ropa que lleva puesta. Sin el CSS, cualquier página se vería como un documento de texto plano, sin colores ni orden visual.

El CSS se usa en prácticamente cualquier web, desde un blog personal hasta una tienda online. Es uno de los tres pilares del desarrollo web front-end, junto con HTML y JavaScript, y resulta imprescindible si vas a montar un proyecto sobre tu propio dominio.

¿Cómo funciona CSS? Selectores y reglas básicas

El CSS funciona mediante reglas. Cada regla tiene dos partes:

• Un selector: que indica a qué elemento de la web se aplica el estilo.
• Y una declaración: que dice qué propiedad se modifica y con qué valor.

La estructura básica es siempre la misma: selector { propiedad: valor; }

Por ejemplo, si quieres que todos los títulos h1 de tu web sean azules, la regla sería “h1 { color: blue; }”. Los selectores más habituales son tres:

• Selector de elemento: aplica el estilo a una etiqueta HTML concreta, como p, h1 o a.
• Selector de clase: se escribe con un punto (.destacado) y se aplica a cualquier elemento que tenga esa clase asignada.
• Selector de id: se escribe con almohadilla (#cabecera) y se usa para un único elemento identificado dentro de la página.

Se llama «en cascada» porque, si varias reglas afectan al mismo elemento, CSS sigue un orden de prioridad para decidir cuál se aplica finalmente.

Diferencias entre CSS y HTML

HTML y CSS trabajan siempre juntos, pero no hacen lo mismo. HTML se encarga de la estructura y el contenido: los títulos, los párrafos, las imágenes o los enlaces. CSS se encarga de la presentación: cómo se ven esos elementos en pantalla.

Por eso, si te preguntas ¿qué es el HTML y CSS? El HTML construye la página y CSS la viste. Puedes tener una web funcional solo con HTML, pero sin CSS tendrá un aspecto muy básico y poco cuidado.

Y si además te preguntas ¿qué es el CSS en HTML?, en realidad se refiere a cómo se conecta ese lenguaje de estilos con el documento HTML, algo que explicamos en el siguiente apartado.

Formas de aplicar CSS en una web (inline, interno y externo)

Hay tres formas de incorporar CSS a una página web, y cada una tiene su uso recomendado:

• CSS inline: el estilo se escribe directamente dentro de la etiqueta HTML, usando el atributo style. Es rápido, pero poco recomendable porque mezcla contenido y diseño y es difícil de mantener.
• CSS interno: los estilos se colocan dentro de una etiqueta <style> en la cabecera del documento HTML. Es útil para pruebas puntuales o páginas muy pequeñas.
• CSS externo: los estilos se guardan en un archivo independiente con extensión .css y se enlazan desde el HTML. Es la opción recomendada porque permite reutilizar el mismo archivo en varias páginas y mantener el código ordenado.

Cuando trabajas con CSS externo, ese archivo se aloja junto al resto de tu web en el hosting, el espacio donde se guardan todos los archivos del sitio, y se sirve al usuario a través de tu dominio cada vez que alguien visita la página.

Ventajas de usar CSS en una página web

• Diseño coherente: un mismo archivo CSS permite aplicar el mismo estilo visual a todas las páginas de una web.
• Mantenimiento más sencillo: si quieres cambiar un color o una tipografía, solo tienes que modificar el archivo CSS, no cada página una por una.
• Webs más rápidas: al usar CSS externo, el navegador puede guardar ese archivo en caché y cargar la web más rápido en visitas posteriores.
• Diseño responsive: CSS permite que una web se adapte automáticamente a móviles, tablets y ordenadores.
• Mejor accesibilidad: un buen uso de CSS ayuda a que el contenido sea más legible y fácil de usar para todo tipo de personas.

¿Qué es CSS3 y qué aporta?

CSS3 es la última gran versión del lenguaje CSS. A diferencia de las anteriores, no llegó como una actualización única, sino dividida en módulos independientes (colores, animaciones, diseño flexible, etc.), lo que ha permitido que vaya incorporando novedades de forma progresiva.

Entre las funciones más importantes que aporta CSS3 están las animaciones y transiciones sin necesidad de JavaScript, los sistemas de maquetación Flexbox y Grid (que facilitan mucho crear diseños complejos y responsive), las media queries para adaptar la web a distintos tamaños de pantalla, y bordes redondeados, sombras o degradados sin necesidad de imágenes.

Gracias a estas mejoras, hoy es habitual apoyarse en un framework de CSS, como Bootstrap o Tailwind, que ya trae componentes y estilos predefinidos basados en CSS3 y agiliza mucho el trabajo de diseño.

Ejemplos básicos de propiedades CSS

Estas son algunas de las propiedades CSS más utilizadas y para qué sirve cada una:

• color: define el color del texto de un elemento. Por ejemplo, color: red pone el texto en rojo.
• margin: controla el espacio exterior de un elemento, es decir, la distancia que lo separa de los elementos que tiene alrededor.
• padding: define el espacio interior de un elemento, entre su contenido y su borde. Es una de las propiedades que más se pregunta qué es en CSS, y la clave para diferenciarla de margin es esta: el padding empuja el contenido hacia dentro, mientras que el margin empuja el elemento hacia fuera.
• font-size: establece el tamaño de la letra de un texto, normalmente en píxeles (px) o en unidades relativas como rem, que se calculan en función del tamaño de fuente base de la página.

Con estas cuatro propiedades ya se puede controlar buena parte del aspecto de una web: color, espaciados y tamaño de texto son la base sobre la que se construye cualquier diseño más avanzado.