Colores y Tipografías

CSS ofrece múltiples formas de definir colores: nombres (red, blue, transparent), hexadecimal (#FF5733), RGB (rgb(255,87,51)), HSL (hsl(11,100%,60%)) y con canal alpha para transparencia (rgba, hsla). HSL es el más intuitivo para diseñadores: defines tono (0-360°), saturación y luminosidad.

Para tipografías, font-family define la fuente (con fallbacks: font-family: "Roboto", Arial, sans-serif), font-size el tamaño, font-weight el grosor (100-900 o bold), line-height el interlineado y letter-spacing el espaciado entre letras. Google Fonts ofrece cientos de fuentes gratuitas que puedes importar con una línea de CSS.

/* COLORES - múltiples formas */
.elemento {
  color: red;                    /* Nombre */
  color: #FF5733;               /* Hexadecimal */
  color: rgb(255, 87, 51);      /* RGB */
  color: rgba(255, 87, 51, 0.8); /* RGBA con transparencia */
  color: hsl(14, 100%, 60%);    /* HSL */
}

/* TIPOGRAFÍA */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;       /* Tamaño base */
  font-weight: 400;      /* Grosor: 100-900 */
  font-style: normal;    /* italic o normal */
  line-height: 1.6;      /* Interlineado */
  letter-spacing: 0.5px; /* Espaciado entre letras */
  text-align: center;    /* Alineación */
  text-decoration: none; /* underline, line-through */
  text-transform: uppercase; /* uppercase, lowercase */
}