¿Qué es CSS?

En esta lección darás tus primeros pasos con CSS: entenderás su sintaxis, las tres formas de añadirlo a una página (y cuál usar), qué es un reset y cómo usar las DevTools para experimentar. Es la base de todo lo que viene.

Concepto

HTML describe qué hay en la página (un título, un párrafo, una imagen). CSS describe cómo se ve: de qué color, qué tamaño, dónde se coloca, cómo se anima.

Analogía

Una casa recién construida (HTML) tiene paredes, puertas y ventanas, pero está en obra negra. CSS es la pintura, los muebles, la iluminación y la decoración. La misma casa puede verse completamente distinta con otra decoración, sin mover una sola pared.

La "C" de CSS significa cascada: varias reglas pueden aplicarse a un mismo elemento, y el navegador sigue un orden para decidir cuál gana. Lo verás a fondo en la siguiente lección.

Sintaxis de una regla CSS

/* selector { propiedad: valor; } */
h1 {
  color: navy;          /* declaración: propiedad + valor */
  font-size: 32px;
  text-align: center;
}

• Selector (h1): a qué elementos se aplica.
• Bloque de declaraciones (entre llaves { }).
• Declaración: propiedad: valor;. El punto y coma separa declaraciones.
• Comentarios: /* así */. No existe el comentario de una línea con // en CSS.

Una hoja de estilos es simplemente una lista de reglas:

body {
  font-family: system-ui, sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
}

p {
  line-height: 1.6;
}

.destacado {
  background-color: #fef08a;
  padding: 4px 8px;
}

Tres formas de incluir CSS

1. Estilos en línea (inline)

Con el atributo style directamente en la etiqueta:

<p style="color: red; font-weight: bold;">Texto importante</p>

Úsalo casi nunca: mezcla contenido y diseño, no se puede reutilizar y tiene una especificidad muy alta que complica sobrescribirlo. Excepciones: correos HTML (los clientes de correo lo requieren) o valores dinámicos puestos con JavaScript.

2. Hoja interna (etiqueta style)

Dentro del head del documento:

<head>
  <style>
    h1 { color: navy; }
    p  { line-height: 1.6; }
  </style>
</head>

Útil para demos, prototipos rápidos o estilos críticos de una sola página. No se comparte entre páginas.

3. Hoja externa (la recomendada)

Un archivo .css separado enlazado con link:

index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primera página con CSS</title>
  <!-- Enlaza la hoja de estilos externa -->
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <h1>Café Aroma</h1>
  <p>El mejor café de especialidad de la ciudad.</p>
  <p class="destacado">Abierto de lunes a sábado, de 8 a 20 h.</p>
</body>
</html>

css/styles.css

body {
  font-family: system-ui, sans-serif;
  max-width: 700px;
  margin: 40px auto;   /* centra el contenido horizontalmente */
  padding: 0 16px;
  color: #3f2a1d;
  background: #fdf8f3;
}

h1 {
  color: #7c2d12;
  font-size: 40px;
}

.destacado {
  background: #fde68a;
  padding: 8px 12px;
  border-radius: 6px;
}

Ventajas: un solo archivo da estilo a todo el sitio, el navegador lo guarda en caché (las siguientes páginas cargan más rápido) y mantiene separadas estructura y presentación.

@import

Permite importar una hoja dentro de otra:

/* styles.css */
@import url("reset.css");
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

Debe ir al inicio del archivo. Úsalo con moderación en CSS puro: cada @import genera una petición que se descarga en cadena (más lento que varios link). En Sass o con herramientas como Vite sí es común, porque todo se combina en un solo archivo final.

Buena práctica

En proyectos reales usa siempre hojas externas con link. Si tienes varias, colócalas en orden: primero el reset, luego tus estilos generales, luego los específicos.

Estilos por defecto y reset

Cada navegador aplica estilos propios: márgenes en el body, tamaños para h1, viñetas en las listas. Varían un poco entre navegadores. Por eso casi todos los proyectos empiezan con un reset que normaliza esas diferencias. Este es un reset moderno y minimalista que puedes usar en todos tus proyectos:

/* reset.css — reset moderno */
*,
*::before,
*::after {
  box-sizing: border-box;   /* el ancho incluye padding y borde (lección 5) */
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;            /* las imágenes nunca se desbordan */
}

input, button, textarea, select {
  font: inherit;              /* los formularios heredan la fuente */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;  /* palabras largas no rompen el diseño */
}

Alternativas conocidas: normalize.css (conserva estilos útiles y sólo corrige inconsistencias) o el reset de Josh Comeau, en el que se basa el anterior.

CSS en las DevTools

Las DevTools son tu laboratorio:

1. Clic derecho sobre un elemento → Inspeccionar.
2. En el panel Styles verás todas las reglas que le aplican, de la más específica a la menos.
3. Haz clic en un valor para cambiarlo; usa las flechas ↑ ↓ para ajustar números (con Shift de 10 en 10).
4. Desmarca la casilla de una declaración para desactivarla temporalmente.
5. Haz clic en + para añadir una nueva regla.
6. Las reglas tachadas están sobrescritas por otras; un ícono ⚠ indica una propiedad inválida.
7. En Computed ves el valor final de cada propiedad y el diagrama del modelo de caja.

Error común

Escribir mal una propiedad o valor (colour: red, font-size: 16 px con espacio, olvidar el ;). CSS no muestra errores: simplemente ignora la declaración inválida. Si un estilo no funciona, revisa en DevTools si aparece tachado o con advertencia.

Casos de uso reales

• Rediseño sin tocar HTML: un cliente quiere "modernizar" su sitio. Cambiando sólo el CSS puedes transformar colores, tipografías y layout.
• Varias páginas, un estilo: index.html, menu.html y contacto.html comparten styles.css. Cambias el color corporativo en un lugar y se actualiza todo.
• Pruebas en vivo con el cliente: en una videollamada ajustas colores en DevTools hasta que le guste, y luego lo pasas al archivo.

Ejercicios

1. Crea index.html y css/styles.css. Enlázalos y haz que el fondo de la página sea gris claro y el texto gris oscuro.
2. Haz que todos los h2 sean color teal y estén centrados.
3. Crea una clase .aviso con fondo amarillo claro, borde izquierdo naranja de 4 px y un poco de padding. Aplícala a un párrafo.
4. Añade el reset moderno en un archivo reset.css y enlázalo antes de styles.css.

Ver solución

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicios CSS</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <h2>Nuestros servicios</h2>
  <p class="aviso">Hoy cerramos a las 18 h.</p>
</body>

/* css/styles.css */
body {
  background-color: #f1f5f9;
  color: #334155;
  padding: 24px;
}

h2 {
  color: teal;
  text-align: center;
}

.aviso {
  background-color: #fef9c3;
  border-left: 4px solid orange;
  padding: 12px 16px;
}

Resumen

• CSS define la presentación visual; HTML, la estructura.
• Una regla = selector + bloque de declaraciones propiedad: valor;.
• Tres formas de incluirlo: inline, style interno y hoja externa (la recomendada).
• Un reset normaliza los estilos por defecto de los navegadores.
• CSS ignora en silencio las declaraciones inválidas: usa DevTools para detectarlas.

Siguiente: Selectores, cascada y especificidad.