CSS: qué es, para qué sirve y cómo se escribe

CSS es el lenguaje que decide cómo se ve una página web: los colores, los tipos de letra, los espacios entre bloques y dónde se coloca cada cosa en la pantalla del ordenador o del móvil. Si el HTML es el texto y la estructura de una web, el CSS es su diseño. Esta guía explica qué es, cómo se escribe una regla, las tres formas de añadirlo a una página y el vocabulario básico para entender cualquier hoja de estilos, con ejemplos que puedes copiar y probar.

Qué es CSS y para qué sirve

Las siglas vienen del inglés Cascading Style Sheets, que en español se traduce como hojas de estilo en cascada. Es un lenguaje de diseño, no de programación: no hace cálculos ni toma decisiones complejas, sino que describe cómo deben mostrarse los elementos de un documento. El navegador lee esas instrucciones y las aplica al pintar la página.

Su gran ventaja es que separa el contenido de la presentación. Un mismo archivo de estilos puede dar formato a cientos de páginas, de modo que cambiar el color de todos los títulos de una web es cuestión de editar una sola línea. También permite que una página se adapte a pantallas de distintos tamaños sin tener que reescribir el contenido.

Un poco de historia

La propuesta de CSS la presentó Håkon Wium Lie en 1994, cuando trabajaba en el CERN, y el consorcio W3C publicó la primera especificación oficial en 1996. Internet Explorer 3 fue el primer gran navegador en interpretarla, aunque de forma parcial. Desde entonces, el lenguaje ha crecido por módulos independientes, y hoy el W3C lo mantiene como un estándar vivo que suma novedades cada año.

Cómo se escribe una regla CSS

Una hoja de estilos es una lista de reglas. Cada regla tiene dos partes: el selector, que indica a qué elementos se aplica, y un bloque entre llaves con una o varias declaraciones. Cada declaración une una propiedad y un valor separados por dos puntos, y termina en punto y coma.

h2 {
  color: #0B2A6B;
  font-size: 28px;
  margin-bottom: 12px;
}

En este ejemplo, todos los títulos de nivel 2 de la página se mostrarán en azul oscuro, con un tamaño de 28 píxeles y un margen inferior de 12 píxeles. Si hay varias reglas que afectan al mismo elemento, entra en juego la «cascada» que da nombre al lenguaje: el navegador decide cuál gana según lo específico que sea el selector y el orden en el que aparecen.

Tres formas de añadir CSS a una página

El mismo código CSS puede llegar a una página de tres maneras. Cada una tiene su momento, aunque en una web real casi todo va en un archivo externo.

<p style="color:red">

<style> p { color:red } </style>

<link rel="stylesheet" href="estilos.css">

• En línea: el estilo va dentro de la etiqueta con el atributo style. Sirve para un cambio puntual, pero se vuelve inmanejable si se abusa de él.
• En la cabecera: las reglas se escriben dentro de una etiqueta <style> en el <head> del documento. Útil para una página suelta o para estilos críticos que deben cargar primero.
• En un archivo externo: las reglas se guardan en un archivo .css que se enlaza desde cada página. Es la opción recomendada, porque el navegador lo guarda en caché y todas las páginas comparten el mismo diseño.

Glosario rápido de CSS

Estos son los términos que aparecen una y otra vez al leer o escribir hojas de estilo.

selector

La parte de la regla que elige qué elementos cambian: una etiqueta, una clase o un identificador.

propiedad

Lo que se modifica: color, tamaño de letra, márgenes, bordes, fondo…

cascada

El sistema que decide qué regla se aplica cuando varias chocan.

modelo de caja

Cada elemento es una caja con contenido, relleno, borde y margen.

flexbox

Sistema para colocar elementos en fila o en columna y repartir el espacio.

grid

Divide la página en filas y columnas para maquetar en dos dimensiones.

media query

Condición que cambia el diseño según el ancho de la pantalla.

pseudoclase

Estado de un elemento, como :hover cuando pasas el ratón por encima.

variable

Un valor con nombre, como --azul, que se reutiliza en toda la hoja.

CSS y los navegadores

Cada navegador trae su propia hoja de estilos por defecto, la que da a los enlaces su color azul o a los títulos su tamaño cuando una página no define nada. Por eso una web sin CSS se ve parecida, pero no idéntica, en Chrome, Firefox o Safari.

Durante años, el gran quebradero de cabeza fue Internet Explorer, que interpretaba algunas propiedades a su manera, sobre todo el modelo de caja. Los diseñadores llenaban sus hojas de trucos y comentarios condicionales para que todo encajara en IE 6. Hoy los navegadores siguen los estándares de forma mucho más homogénea, y antes de usar una propiedad nueva basta con consultar las tablas de compatibilidad de fuentes como MDN o Can I use.

Por dónde empezar a aprender CSS

No hace falta instalar nada: con un editor de texto y un navegador ya se puede practicar. Un buen camino es este:

1. Crea un archivo HTML sencillo con un título, un par de párrafos y una lista.
2. Enlázale un archivo estilos.css y cambia colores, tipos de letra y márgenes.
3. Usa las herramientas para desarrolladores del navegador (tecla F12) para ver y probar estilos en directo.
4. Cuando domines lo básico, practica flexbox y grid maquetando una cabecera y una rejilla de tarjetas.
5. Termina con media queries para que tu página se vea bien en el móvil.

Preguntas frecuentes