Qué es CSS y para qué sirve con ejemplos de código

CSS es el lenguaje que define cómo se ve una página web: colores, tipografías, tamaños, espacios y la colocación de cada elemento en pantalla. El HTML dice qué hay en la página (un título, un párrafo, una imagen) y el CSS decide su aspecto.

Las siglas significan Cascading Style Sheets, en español «hojas de estilo en cascada». En esta guía vas a ver, con ejemplos cortos que puedes copiar y probar, cómo se escribe una regla, las tres formas de aplicar CSS, qué es la cascada, el modelo de caja, Flexbox y Grid, el diseño responsive, las variables y las novedades que ya puedes usar sin miedo.

Qué significa CSS y para qué sirve

Cada palabra del nombre explica algo. Style sheets (hojas de estilo) porque son archivos con instrucciones de presentación. Cascading (en cascada) porque varias reglas pueden afectar al mismo elemento y el navegador sigue un orden para decidir cuál se aplica. Lo verás más abajo con un ejemplo.

Con CSS puedes:

• Cambiar colores de texto y de fondo.
• Elegir la tipografía, su tamaño y el interlineado.
• Dar márgenes, rellenos y bordes a cualquier bloque.
• Colocar elementos en columnas, filas o rejillas.
• Adaptar el diseño al móvil, a la tablet o al escritorio.
• Preparar una versión limpia para imprimir.

CSS es un lenguaje de estilos, no de programación: no da órdenes paso a paso ni hace cálculos de lógica. Describe cómo debe verse cada cosa y el navegador se encarga del resto.

Diferencia entre HTML y CSS

La forma más sencilla de entenderlo es pensar en una casa: el HTML es la estructura (paredes, puertas, habitaciones) y el CSS es la pintura, los muebles y la decoración. Puedes cambiar toda la decoración sin tocar una sola pared.

Separar contenido y presentación tiene una ventaja práctica: una sola hoja de estilos puede dar el mismo aspecto a todas las páginas de una web. Si quieres repasar cómo ha cambiado el HTML para dejar el diseño en manos del CSS, lo contamos en las diferencias entre HTML4 y HTML5, y si quieres ver dónde va cada cosa en el código, en la estructura básica de una página web en HTML.

Anatomía de una regla CSS

Todo el CSS se escribe con reglas. Una regla tiene un selector (a qué elementos afecta) y, entre llaves, una o varias declaraciones con la forma propiedad: valor, separadas por punto y coma.

h1 {
  color: red;
  font-size: 2rem;
}

• h1 es el selector: afecta a todos los títulos h1.
• color y font-size son propiedades.
• red y 2rem son sus valores.
• Cada declaración termina en punto y coma.

Además de etiquetas, puedes seleccionar por clase (con punto) o por id (con almohadilla):

.aviso { background: yellow; }
#cabecera { padding: 20px; }

Las tres formas de aplicar CSS (y cuál usar)

1. Hoja externa. Escribes el CSS en un archivo aparte y lo enlazas desde el <head> del HTML. Según la documentación de MDN, es el método más común y útil, porque un mismo archivo sirve para varias páginas.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

2. Hoja interna. El CSS va dentro de una etiqueta <style> en el propio HTML. Sirve para pruebas o para una página suelta.

<style>
  p { color: navy; }
</style>

3. Estilo en línea. El CSS va en el atributo style de un elemento concreto.

<p style="color: green;">Texto verde</p>

¿Cuál usar? La hoja externa, casi siempre. MDN desaconseja los estilos en línea: son más difíciles de mantener y mezclan presentación y contenido. Solo tienen sentido en casos concretos, como un gestor de contenidos muy restrictivo, un email en HTML o estilos que se ponen con JavaScript.

Cómo lee el CSS el navegador

Cuando abres una página, el navegador sigue más o menos estos pasos:

1. Carga el HTML y lo convierte en el DOM, una representación en árbol de la página.
2. Carga los recursos enlazados, entre ellos el CSS.
3. Analiza el CSS y monta el árbol de renderizado aplicando las reglas a cada nodo.
4. Pinta el resultado en pantalla.

Un detalle muy útil cuando empiezas: si el navegador no reconoce una propiedad o un valor, ignora esa declaración y sigue con las demás. La página no se rompe. Por eso un error de escritura como este no da ningún aviso, simplemente no hace nada:

p {
  colour: blue; /* mal escrito: se ignora */
  font-size: 18px; /* esta sí se aplica */
}

Cascada y especificidad: qué regla gana

A menudo dos reglas dicen cosas distintas sobre el mismo elemento. La cascada decide cuál se aplica mirando, por orden, la relevancia, el origen y la importancia (!important), la especificidad, otros desempates y, si todo empata, el orden de aparición: gana la última.

La especificidad mide lo concreto que es un selector. Se cuenta en tres columnas, ID-CLASE-TIPO, y se comparan de izquierda a derecha:

Un ejemplo con este HTML: <p id="intro" class="destacado">Hola</p>.

#intro { color: blue; }      /* 1-0-0 */
p.destacado { color: green; } /* 0-1-1 */
p { color: red; }             /* 0-0-1 */

El texto sale azul. Aunque la regla de p va la última, el id tiene más peso, y la columna de la izquierda manda. Si dos selectores empatan en las tres columnas, gana el que aparece después en el código.

Dos avisos: los estilos en línea se imponen a las reglas normales de las hojas de estilo, y usar !important para saltarse la especificidad se considera mala práctica. Si lo necesitas a menudo, suele ser señal de que los selectores están mal planteados.

El modelo de caja

Para CSS, cada elemento es una caja con cuatro capas, de dentro hacia fuera: el contenido, el relleno (padding), el borde (border) y el margen (margin).

Aquí está la trampa clásica. En el modelo estándar, width solo mide el contenido. Mira esta caja:

.caja {
  width: 350px;
  padding: 25px;
  border: 5px solid black;
}

No ocupa 350px, sino 410px de ancho: 350 de contenido, más 25 de relleno a cada lado, más 5 de borde a cada lado (el margen va aparte). La solución que se usa en casi todos los proyectos es cambiar el cálculo con box-sizing:

*, *::before, *::after {
  box-sizing: border-box;
}

Con border-box, el ancho que escribes ya incluye el relleno y el borde, así que la caja mide justo lo que dices.

Flexbox y Grid: cuándo usar cada uno

Son las dos herramientas actuales para colocar elementos en la página, y se combinan entre sí.

• Flexbox es unidimensional: coloca elementos en una fila o en una columna. Ideal para un menú, una barra de botones o centrar algo.
• Grid es bidimensional: trabaja con filas y columnas a la vez. Ideal para la estructura general de una página o una galería de tarjetas.

/* Flexbox: menú en fila, con espacio entre enlaces */
.menu {
  display: flex;
  gap: 1rem;
}

/* Grid: tres columnas iguales */
.galeria {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

Una regla práctica: si piensas en una sola línea de elementos, Flexbox; si piensas en una cuadrícula, Grid. Es muy habitual usar Grid para el esqueleto de la página y Flexbox dentro de cada bloque.

Media queries y diseño responsive

Las media queries aplican CSS solo cuando se cumple una condición: el tipo de medio (pantalla o impresión) o características como el ancho, la resolución, la orientación o las preferencias del usuario.

.galeria { grid-template-columns: 1fr; }

@media (min-width: 30em) {
  .galeria { grid-template-columns: 1fr 1fr 1fr; }
}

En móvil la galería va en una columna y, a partir de 30em de ancho, en tres. La sintaxis nueva @media (width >= 30em) hace lo mismo y se lee mejor.

Para que esto funcione en el móvil, el HTML necesita esta etiqueta en el <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Sin ella, el móvil muestra la página como si tuviera el ancho de un escritorio (normalmente unos 980px) y la reduce, y tus media queries no sirven de mucho. La guía de Google en web.dev aconseja empezar por las pantallas pequeñas y poner los puntos de corte donde el contenido lo pida, no según modelos de teléfono. Es lo que se conoce como diseño mobile first.

Variables y novedades de CSS

Variables CSS

Las variables (su nombre técnico es custom properties) guardan un valor para reutilizarlo. Se declaran con dos guiones delante, normalmente en :root para que estén disponibles en toda la página, y se usan con var():

:root {
  --main-bg-color: brown;
}

.cabecera {
  background: var(--main-bg-color);
  color: var(--my-var, red); /* red si --my-var no existe */
}

El segundo valor dentro de var() es de reserva: se usa si la variable no está definida. Con los colores y tamaños de la marca guardados en variables, cambiarlos en toda la web es tocar una línea, y eso ayuda mucho a mantener un diseño web consistente.

Novedades que ya puedes usar

Estas tres funciones tienen el sello Baseline y funcionan en todos los navegadores principales, así que puedes usarlas en un proyecto real.

:has() selecciona un elemento según lo que contiene, algo que antes no se podía hacer y que permite seleccionar al padre. Funciona en todos los navegadores principales desde diciembre de 2023.

/* Las secciones que contienen un elemento .featured */
section:has(.featured) {
  border: 2px solid gold;
}

Container queries (@container) aplican estilos según el tamaño del contenedor, no de la ventana. Una tarjeta puede cambiar de diseño según el hueco que tenga, esté donde esté. Funciona en todos los navegadores principales desde febrero de 2023.

.zona { container-type: inline-size; }

@container (min-width: 400px) {
  .tarjeta { display: flex; }
}

Anidamiento nativo (nesting): escribes reglas dentro de otras con &, como se hacía con Sass, pero sin instalar nada. Funciona en todos los navegadores principales desde diciembre de 2023.

.example {
  color: black;
  &:hover {
    color: blue;
  }
}

¿Existe CSS4? Breve historia de CSS

No. El propio W3C lo dice en su CSS Snapshot: «There is no CSS Level 4». Lo que sí existe son módulos que llegan al nivel 4 o más, como Selectors Level 4. Así ha llegado CSS hasta aquí:

• 10 de octubre de 1994: Håkon W. Lie publica la propuesta «Cascading HTML style sheets: a proposal».
• 17 de diciembre de 1996: CSS1 se convierte en Recomendación del W3C, firmada por Håkon Wium Lie y Bert Bos.
• Mayo de 1998: CSS2 es Recomendación.
• Después de CSS2: el lenguaje deja de ser un único documento y se divide en módulos con niveles propios. Los módulos sin equivalente en CSS2 empiezan en el nivel 1 y los que actualizan funciones de CSS2 empiezan en el nivel 3.

Por eso no tiene sentido esperar un «CSS4» completo: cada módulo avanza a su ritmo y los navegadores van incorporando lo nuevo. Cuando estudies, fíjate en si una función tiene soporte amplio, no en el número de versión.

¿Tienes un negocio y necesitas una web profesional? Si estás aprendiendo, sigue practicando con estos ejemplos. Si lo que buscas es una web para tu negocio en La Rioja, bien hecha y adaptada al móvil, en Rioja Creativa nos dedicamos al diseño web en Logroño y podemos encargarnos de ella.