Colores, tipografía y modelo de cajas
Aplique color con valores hex, rgb y hsl, elija fuentes, establezca tamaños y alturas de línea, y use margin, border y padding para espaciar elementos.
Colores, tipografía y modelo de cajas es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Valores de color de CSS
CSS admite varios formatos de color. Use el que resulte más claro en cada contexto: códigos hexadecimales para los colores de marca, hsl() para ajustar colores fácilmente, rgb() para valores programáticos y colores con nombre para crear prototipos rápidamente.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */Colores e imágenes de fondo
Establezca los fondos de los elementos con background-color. Use background-image con degradados o URL. La abreviatura background combina el color, la imagen, la posición, el tamaño y la repetición en una sola declaración.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;Propiedades de las fuentes
Controle la tipografía con: font-family (familia tipográfica), font-size (em, rem, px), font-weight (100–900), font-style (cursiva), line-height (proporción de legibilidad) y letter-spacing (interletraje).
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}Propiedades del texto
Estilos de texto adicionales: text-align (izquierda, centro, derecha, justificado), text-decoration (subrayado, tachado, ninguno), text-transform (mayúsculas, capitalización) y text-overflow: ellipsis para truncar el texto.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem frente a em y px
px es absoluto. em es relativo al tamaño de fuente propio del elemento (se propaga en cascada). rem es relativo al tamaño de fuente raíz (predecible). Use rem para la mayoría de los tamaños, a fin de respetar las preferencias de fuente del usuario.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */El modelo de caja
Todo elemento HTML es una caja rectangular con cuatro capas: contenido (las dimensiones reales del elemento), relleno (espacio dentro del borde), borde y margen (espacio fuera del borde).
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
De forma predeterminada (content-box), el relleno y el borde se suman al ancho declarado. Con box-sizing: border-box, el relleno y el borde se incluyen en el ancho declarado, que es casi siempre lo que necesita.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}Colapso de márgenes
Los márgenes verticales entre elementos de bloque adyacentes se colapsan: solo se aplica el margen mayor. Los márgenes de un elemento principal y de su primer o último elemento secundario también se colapsan. Los elementos secundarios de Flexbox y Grid no colapsan sus márgenes.
Abreviatura de padding
La abreviatura padding: top right bottom left establece todos los lados. Dos valores establecen los valores vertical y horizontal. Tres establecen los valores superior, horizontal e inferior.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */Propiedades de los bordes
Establezca los bordes con la abreviatura border: width style color. Para lados individuales: border-top, etc. Use border-radius para crear esquinas redondeadas. outline es similar, pero no afecta al diseño.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}Desbordamiento
overflow: hidden recorta el contenido que supera el tamaño del elemento. overflow: scroll añade barras de desplazamiento. overflow: auto añade barras de desplazamiento solo cuando son necesarias. Use overflow-x y overflow-y para controlar los ejes de forma independiente.
Comprobación rápida
Con box-sizing: border-box y width: 300px; padding: 20px; border: 2px solid, ¿cuál es el ancho total renderizado del elemento?
Resumen: colores, tipografía y modelo de caja
Establezca los colores con hex, rgb o hsl. Aplique fuentes con font-family, tamaño, peso y line-height. Todo elemento es una caja: contenido + padding + border + margin. Active box-sizing: border-box globalmente para obtener tamaños predecibles.
Preguntas frecuentes
¿La lección «Colores, tipografía y modelo de cajas» es gratis?
Sí — el texto completo de «Colores, tipografía y modelo de cajas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Colores, tipografía y modelo de cajas»?
Aplique color con valores hex, rgb y hsl, elija fuentes, establezca tamaños y alturas de línea, y use margin, border y padding para espaciar elementos. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Colores, tipografía y modelo de cajas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Selectores y cascada
- Colores, tipografía y modelo de cajas
- Conceptos básicos de display: block, inline, flex y grid
- Posicionamiento: relative, absolute, fixed y sticky