¿Qué es CSS y cómo funciona?

CSS (Cascading Style Sheets) es el lenguaje que le da vida visual al HTML. Mientras HTML define el "qué" (esto es un título, esto es un párrafo), CSS define el "cómo se ve" (este título es verde, grande y centrado). Sin CSS, todas las páginas web serían texto negro sobre fondo blanco.

CSS funciona por "cascada": múltiples reglas pueden aplicar al mismo elemento y la que gana depende de su especificidad y orden. Un estilo inline tiene más peso que una clase, que tiene más peso que una etiqueta. Entender la cascada y la especificidad es clave para evitar que tus estilos se "pisen" entre sí.

Siempre usa CSS externo (archivo .css separado, enlazado con link rel="stylesheet"): mantiene el HTML limpio, permite reutilizar estilos entre páginas, y el navegador lo cachea para carga más rápida. El CSS inline (atributo style) solo debe usarse en casos muy específicos o generado dinámicamente por JavaScript.

/* Selector de elemento */
p {
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
}

/* Selector de clase (.nombreClase) */
.boton-principal {
  background-color: #00E5A0;
  color: #0A0F1E;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

/* Selector de ID (#nombreId) - solo uno por página */
#menu-principal {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

/* Selector combinado */
h1, h2, h3 {
  font-family: Arial, sans-serif;
  color: #0A0F1E;
}