Con HTML tienes el contenido bien organizado… y muy feo. CSS (Cascading Style Sheets, hojas de estilo en cascada) es donde entra tu mirada de diseñador: color, tipografía, espaciado, composición. Y todo sin tocar el HTML.

Los estilos se escriben en un fichero aparte, por ejemplo css/estilos.css, y se enlazan desde el <head> del HTML:

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

Así una sola hoja de estilos da aspecto a todas las páginas del sitio.

📌 Nota. Existen otras dos formas (el atributo style en una etiqueta y el elemento <style> en el <head>), pero mezclan estilo y contenido. En este curso usaremos siempre un fichero .css externo.

h1 {
  color: #d62828;
  font-size: 3rem;
}

selector   h1 {                  ← a qué elementos se aplica
propiedad    color: #d62828;     ← qué cambias : valor ;
             font-size: 3rem;
           }

• El selector elige los elementos.
• Entre llaves van las declaraciones: propiedad: valor;.
• Cada declaración termina en punto y coma. Olvidarlo es el error más habitual.

/* Selector de tipo: todos los párrafos */
p {
  line-height: 1.6;
}

/* Selector de clase: los elementos con class="destacado" */
.destacado {
  background-color: #fcbf49;
}

/* Selector de id: el único elemento con id="portada" */
#portada {
  text-align: center;
}

/* Selector descendiente: los enlaces que están dentro de nav */
nav a {
  text-decoration: none;
}

Las clases se asignan en el HTML con el atributo class (un elemento puede tener varias, separadas por espacios):

<p class="destacado">Disponible para proyectos freelance.</p>
<section id="portada">…</section>

¿Qué pasa si dos reglas dicen cosas distintas del mismo elemento? Decide la especificidad y, a igualdad, el orden (gana la última):

• Un id es más específico que una clase, y una clase más que un tipo.
• Si tienen la misma especificidad, gana la regla que aparece después en el CSS.

p { color: black; }
.aviso { color: firebrick; }   /* gana en <p class="aviso"> aunque p esté antes o después */

💡 Consejo. Si un estilo "no se aplica", inspecciona el elemento con las DevTools: verás todas las reglas que le afectan y las que han sido tachadas porque otra gana.

body {
  color: #1d3557;              /* hexadecimal */
  background-color: rgb(241 250 238);   /* rgb */
}
.acento {
  color: hsl(354 70% 50%);     /* tono, saturación, luminosidad */
}

Puedes usar nombres (red), hexadecimal, rgb() o hsl(). HSL es muy intuitivo para diseñadores: cambiando solo la luminosidad obtienes variaciones de un mismo tono.

⚠️ Atención. Contraste: el texto debe leerse bien sobre su fondo. La norma de accesibilidad (WCAG AA) pide una relación de al menos 4,5:1 para texto normal. Las DevTools de Chrome y Firefox te muestran el contraste al inspeccionar un color.

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;           /* tamaño base */
  line-height: 1.5;          /* interlineado, sin unidad */
}
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.02em;   /* tracking */
  text-transform: uppercase;
}

• font-family lleva una lista de alternativas: si no está la primera, usa la siguiente. Termina siempre en una genérica (serif, sans-serif, monospace).
• Más adelante aprenderás a incluir tus propias tipografías en el proyecto.

Para CSS, cada elemento es una caja con cuatro capas, de dentro a fuera:

┌──────────── margin (espacio exterior, transparente) ───────────┐
│ ┌────────── border (borde) ──────────────────────────────────┐ │
│ │ ┌──────── padding (relleno interior) ────────────────────┐ │ │
│ │ │              content (contenido)                       │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ └────────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘

.tarjeta {
  padding: 1.5rem;              /* espacio entre el borde y el contenido */
  border: 2px solid #1d3557;
  margin: 2rem auto;            /* 2rem arriba y abajo, centrada horizontalmente */
  max-width: 40rem;             /* no crece más de 40rem */
}

/* Recomendado al principio de toda hoja de estilos: */
*, *::before, *::after {
  box-sizing: border-box;       /* el ancho incluye padding y borde */
}

💡 Consejo. En las DevTools, al seleccionar un elemento verás su caja dibujada con colores: el contenido, el padding, el borde y el margen. Es la mejor forma de entender por qué algo ocupa más de lo que esperabas.

• Empieza el CSS por los estilos generales (body, encabezados, enlaces) y termina por los particulares (clases).
• Nombres de clase que digan qué es, no cómo se ve: .aviso mejor que .texto-rojo (mañana puede ser azul).
• Comenta las secciones de tu hoja de estilos.
• Indenta y deja una línea en blanco entre reglas.

• Olvidar ; o }: las reglas siguientes dejan de funcionar.
• Escribir .clase en el HTML (class=".destacado") ✗ → class="destacado" ✓. El punto solo va en el CSS.
• La ruta del <link> no apunta al fichero real.
• Contraste insuficiente entre texto y fondo.