🎨 1.5 · CSS3: el lenguaje de estilo

🎯 Objetivo del tema

🗺️ Mapa del tema

HTML define la estructura y el significado; CSS define la presentación visual. Sin CSS, la web sería un muro de texto negro sobre fondo blanco. Con CSS, la web se vuelve legible, atractiva, y adaptable a cada dispositivo. En este tema vas a aprender las reglas del lenguaje: selectores, propiedades, valores, y el famoso Box Model que determina cómo se posiciona cada elemento.

1.5.1 Qué es CSS y cómo se conecta con HTML

CSS (Cascading Style Sheets) es el lenguaje de estilo de la web. Define CÓMO se ven los elementos HTML: colores, tamaños, posiciones, animaciones, tipografía. La regla CSS más simple tiene dos partes: un selector (a quién aplica) y un bloque de declaraciones (qué le hace).

Anatomía de una regla CSS

/* Esto es un comentario CSS */

selector {
  propiedad: valor;
  otra-propiedad: otro-valor;
}

/* Ejemplo real: */
h1 {
  color: #333;
  font-size: 2.5rem;
  text-align: center;
}

Anatomía de una regla CSS

Las 3 formas de aplicar CSS

Cómo se carga: la cascada

CSS es 'Cascading' (en cascada) porque cuando hay reglas en conflicto, se aplica un orden de prioridad. De mayor a menor importancia:

• !important (úsalo solo en emergencias; es una bomba atómica).
• Estilos inline (style='...') en el propio elemento.
• Selectores por ID (#mi-id).
• Selectores por clase (.mi-clase) y por atributo ([type='text']).
• Selectores por etiqueta (h1, p, div).
• Reglas que aparecen MÁS TARDE en el archivo (ganan a las anteriores con igual especificidad).

1.5.2 Selectores: hablarle a los elementos correctos

Un selector es la parte de la regla CSS que dice a qué elemento(s) aplicar el estilo. Mientras más preciso seas, menos CSS innecesario escribes y menos bugs introduces. Vamos de menor a mayor especificidad.

Pseudo-clases: estilo según estado

Las pseudo-clases te permiten aplicar estilo según el ESTADO o POSICIÓN del elemento. Son vitales para interactividad y accesibilidad.

/* Estilo del enlace en sus 4 estados */
a:link    { color: blue; }              /* enlace no visitado */
a:visited { color: purple; }            /* enlace visitado */
a:hover   { color: red; text-decoration: underline; }  /* mouse encima */
a:active  { color: orange; }            /* en el momento del clic */
a:focus-visible { outline: 2px solid orange; }  /* foco por teclado */

/* Estilo del primer/último hijo */
li:first-child { font-weight: bold; }
li:last-child  { border-bottom: none; }

/* Estilo de campos de formulario */
input:disabled  { background: #eee; cursor: not-allowed; }
input:required  { border-left: 3px solid red; }
input:valid     { border-color: green; }
input:invalid   { border-color: red; }

Pseudo-clases comunes

1.5.3 El Box Model: el corazón de CSS

Todo elemento HTML es una CAJA rectangular. Aunque sea un círculo (con border-radius: 50%) o un texto, internamente se calcula como una caja. Entender el Box Model es entender cómo se posiciona, dimensiona y separa cada elemento del resto.

Las 4 capas del Box Model

• CONTENT: el contenido real (texto, imagen, etc.).
• PADDING: espacio INTERNO entre el contenido y el borde. 'Respira' el contenido dentro de su caja.
• BORDER: la línea que rodea la caja (puede ser invisible si border: 0).
• MARGIN: espacio EXTERNO entre esta caja y las demás.

El ejemplo clásico del padding

.caja {
  width: 200px;       /* ancho del CONTENIDO */
  padding: 20px;        /* +40px al ancho total (20 izq + 20 der) */
  border: 5px solid;    /* +10px al ancho total (5 izq + 5 der) */
  margin: 10px;         /* espacio hacia afuera, no afecta el tamaño de la caja */
}

/* Anchura total real: 200 + 40 + 10 = 250px */
/* Esto confunde a MUCHOS principiantes. */

Box Model estándar (content-box)

/* Reset moderno: TODOS los elementos usan border-box */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Ahora esto SÍ mide 200px de ancho total */
.caja {
  width: 200px;
  padding: 20px;
  border: 5px solid;
}

Reset box-sizing

margin vs padding: la duda eterna

1.5.4 Unidades: px, %, em, rem, vw, vh

Elegir la unidad correcta es la diferencia entre un diseño que se ve bien en tu pantalla y un diseño que se ve bien en TODAS las pantallas. Hay dos familias: absolutas (no escalan) y relativas (escalan según un contexto).

El ejemplo: tipografía fluida

/* html por defecto: 1rem = 16px */

/* h1 fijo a 32px: no escala con el dispositivo */
h1 { font-size: 32px; }

/* h1 relativo: escala con la raíz, mejor para accesibilidad */
h1 { font-size: 2rem; }              /* = 32px por defecto */

/* h1 fluido: escala entre 24px (móvil) y 48px (escritorio) */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* mínimo: 24px, ideal: 4% del viewport, máximo: 48px */
}

Tipografía: px vs rem vs clamp()

1.5.5 Colores: hex, rgb, hsl y cuándo usar cada uno

CSS ofrece 4 formas principales de especificar colores. Cada una tiene ventajas y desventajas. La elección correcta hace que tu paleta sea fácil de mantener, ajustar y hacer accesible.

Por qué hsl es el futuro

/* Generar variaciones de un naranja con hsl es trivial: */
:root {
  --color-primario: hsl(24, 100%, 50%);   /* naranja puro */
  --color-hover:    hsl(24, 100%, 40%);   /* más oscuro */
  --color-activo:   hsl(24, 100%, 30%);   /* aún más oscuro */
  --color-fondo:    hsl(24, 100%, 95%);   /* casi blanco anaranjado */
  --color-texto:    hsl(24, 50%, 20%);    /* gris anaranjado oscuro */
}

/* Cambiar TODO el sitio a azul: cambia UN número */
:root {
  --color-primario: hsl(220, 100%, 50%);  /* azul */
  /* el resto se ajusta automáticamente */
}

Por qué hsl es poderoso

1.5.6 Tipografía: legibilidad primero

El 95% de la web es texto. Una buena tipografía hace que tu contenido se lea cómodo, rápido, y sin esfuerzo. Una mala tipografía hace que el usuario huya a los 5 segundos, independiente de lo bueno que sea tu contenido.

Las 5 propiedades clave

/* Familia tipográfica: incluye SIEMPRE fallbacks */
body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* Tamaño: usa rem, no px */
body { font-size: 1rem; }        /* 16px por defecto */
h1   { font-size: 2.5rem; }     /* 40px */
h2   { font-size: 1.875rem; }   /* 30px */
small { font-size: 0.875rem; }  /* 14px */

/* Peso: 100-900, usa los que la fuente tenga */
h1 { font-weight: 700; }  /* bold */
p  { font-weight: 400; }  /* normal */

/* Altura de línea: 1.5 a 1.7 para texto corrido */
body { line-height: 1.6; }
h1   { line-height: 1.2; }  /* títulos más compactos */

/* Espaciado entre letras: sutil pero importante */
h1 { letter-spacing: -0.02em; }  /* títulos grandes: un poco menos */
p  { letter-spacing: 0; }
small { letter-spacing: 0.02em; }  /* texto pequeño: un poco más */

Las 5 propiedades de tipografía

Google Fonts: tipografías gratis y legales

No uses Comic Sans en un sitio profesional. Pero tampoco te limites a 'Times New Roman' y 'Arial'. Google Fonts ofrece más de 1500 familias tipográficas gratuitas y optimizadas para la web. Las más populares en 2024-2025:

📚 Contenido ampliado

Material adicional, referencias externas verificadas y ejemplos extendidos.