Ya vimos cómo seleccionar elementos y cómo funciona el modelo de caja. El siguiente paso es empezar a controlar con más precisión la apariencia visual de una página.
En esta guía vamos a trabajar con tipografías, colores, fondos y las principales unidades de medida de CSS.
Tipografías en CSS
CSS permite controlar la familia tipográfica, el tamaño, el grosor, la altura de línea y otras características del texto.
font-family
La propiedad font-family define la tipografía utilizada.
body {
font-family: Arial, Helvetica, sans-serif;
}
Es habitual definir varias opciones separadas por comas. El navegador utilizará la primera disponible.
En este ejemplo:
- intenta usar Arial;
- si no está disponible, intenta Helvetica;
- si tampoco está disponible, utiliza una fuente genérica sans-serif.
Fuentes genéricas
Entre las familias genéricas más conocidas encontramos:
serif
sans-serif
monospace
cursive
fantasy
Para código fuente suele utilizarse una tipografía monoespaciada:
pre {
font-family: Consolas, Monaco, monospace;
}
font-size
font-size controla el tamaño del texto.
p {
font-size: 18px;
}
Sin embargo, px no es la única unidad disponible. Más adelante veremos otras opciones como rem y em.
font-weight
Controla el grosor de la tipografía.
h1 {
font-weight: 700;
}
También podemos utilizar palabras como:
normal
bold
Valores como 400 y 700 son muy frecuentes:
400 ≈ normal
700 ≈ bold
La disponibilidad exacta depende de la fuente utilizada.
font-style
Permite aplicar, por ejemplo, texto en cursiva.
.nota {
font-style: italic;
}
line-height
line-height controla la altura de línea.
p {
line-height: 1.6;
}
Una altura de línea adecuada mejora mucho la legibilidad, especialmente en textos largos.
text-align
Permite alinear texto.
h1 {
text-align: center;
}
Valores comunes:
left
center
right
justify
text-decoration
Se utiliza habitualmente para controlar subrayados.
a {
text-decoration: none;
}
También existen valores como underline, overline y line-through.
text-transform
Permite transformar visualmente el uso de mayúsculas y minúsculas.
.titulo {
text-transform: uppercase;
}
Otros valores útiles son:
lowercase
capitalize
letter-spacing
Controla el espacio entre caracteres.
h1 {
letter-spacing: 2px;
}
Colores en CSS
CSS ofrece varias formas de representar colores.
Colores por nombre
p {
color: blue;
}
Es fácil de leer, aunque ofrece menos control que otros formatos.
Colores hexadecimales
p {
color: #007bff;
}
El formato hexadecimal comienza con # y es muy utilizado en diseño web.
RGB
RGB representa rojo, verde y azul.
p {
color: rgb(0, 123, 255);
}
Cada componente suele utilizar valores entre 0 y 255.
RGBA
RGBA agrega un canal alfa para definir transparencia.
.caja {
background-color: rgba(0, 123, 255, 0.25);
}
En este ejemplo, 0.25 representa una opacidad del 25%.
HSL
HSL representa:
- Hue: tono;
- Saturation: saturación;
- Lightness: luminosidad.
.boton {
background-color: hsl(211, 100%, 50%);
}
HSL puede resultar muy cómodo cuando queremos crear variaciones de un mismo color.
La propiedad color
color controla principalmente el color del texto.
body {
color: #333333;
}
Fondos en CSS
Los fondos pueden ser colores, imágenes o combinaciones de ambos.
background-color
body {
background-color: #f4f4f4;
}
background-image
También podemos utilizar una imagen como fondo.
.hero {
background-image: url('fondo.jpg');
}
background-repeat
Por defecto, una imagen pequeña puede repetirse.
.hero {
background-repeat: no-repeat;
}
background-size
cover hace que la imagen cubra el área disponible.
.hero {
background-size: cover;
}
Otra opción frecuente es contain.
background-position
.hero {
background-position: center;
}
Ejemplo completo de fondo
.hero {
background-image: url('fondo.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
padding: 80px 20px;
}
Gradientes
CSS también permite generar gradientes sin utilizar una imagen externa.
.hero {
background: linear-gradient(135deg, #0b1220, #007bff);
}
Unidades CSS
Una de las decisiones más importantes al trabajar con CSS es elegir correctamente las unidades de medida.
No todas las unidades se comportan igual.
px
px representa píxeles CSS.
.caja {
width: 300px;
}
Es una unidad muy utilizada porque resulta fácil de entender y controlar.
Sin embargo, un píxel CSS no siempre corresponde exactamente a un píxel físico de la pantalla. Los navegadores y dispositivos manejan escalado y densidades distintas.
%
Los porcentajes suelen depender del tamaño del elemento contenedor.
.caja {
width: 80%;
}
Esto permite crear estructuras más flexibles.
em
em es una unidad relativa.
.boton {
font-size: 16px;
padding: 1em 2em;
}
En muchas propiedades, 1em toma como referencia el tamaño de fuente del propio elemento.
Por ejemplo, si el texto mide 16px:
1em = 16px
2em = 32px
rem
rem significa root em.
Se basa en el tamaño de fuente del elemento raíz, normalmente html.
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
En este caso:
1rem = 16px
2rem = 32px
rem suele ser especialmente útil para mantener una escala tipográfica consistente.
em vs rem
Una forma sencilla de diferenciarlos:
em → relativo al contexto del elemento
rem → relativo al elemento raíz
En diseños modernos es habitual utilizar rem para tipografías y espaciados generales.
vw
vw significa viewport width.
1vw representa aproximadamente el 1% del ancho del viewport.
.hero {
width: 100vw;
}
vh
vh significa viewport height.
1vh representa aproximadamente el 1% de la altura del viewport.
.hero {
min-height: 100vh;
}
Es frecuente utilizarlo para crear secciones que ocupen toda la altura visible.
¿Qué unidad conviene usar?
No existe una única unidad correcta para todo.
Como orientación inicial:
px: bordes, detalles pequeños y medidas muy específicas;%: anchos relativos al contenedor;rem: tipografías y espaciados escalables;em: tamaños relativos al componente;vw y vh: medidas relacionadas con la ventana del navegador.
Ejemplo práctico
HTML:
<section class="presentacion">
<h1>Club Programador</h1>
<p>
Aprendé programación paso a paso.
</p>
<a href="#" class="boton">
Ver cursos
</a>
</section>
CSS:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: #e5e7eb;
background-color: #0b1220;
}
.presentacion {
min-height: 100vh;
padding: 4rem 2rem;
text-align: center;
background: linear-gradient(135deg, #0b1220, #1e3a8a);
}
.presentacion h1 {
font-size: 3rem;
line-height: 1.1;
letter-spacing: 1px;
}
.presentacion p {
font-size: 1.125rem;
line-height: 1.6;
}
.boton {
display: inline-block;
margin-top: 1rem;
padding: 0.8em 1.5em;
color: white;
background-color: #007bff;
text-decoration: none;
border-radius: 8px;
}
Herencia de estilos
Algunas propiedades, especialmente relacionadas con texto, pueden heredarse.
Por ejemplo:
body {
font-family: Arial, sans-serif;
color: #333333;
}
Muchos elementos descendientes utilizarán esa tipografía y ese color salvo que otra regla los sobrescriba.
Propiedades como margin, padding o border, en cambio, no suelen heredarse de la misma manera.
Contraste y legibilidad
Elegir colores no es solamente una cuestión estética.
El texto debe tener contraste suficiente con el fondo para que pueda leerse cómodamente.
Por ejemplo, texto gris muy claro sobre fondo blanco puede resultar difícil de leer.
También conviene evitar tamaños de fuente demasiado pequeños y alturas de línea insuficientes.
Errores comunes
- usar demasiadas familias tipográficas diferentes;
- elegir colores con poco contraste;
- usar tamaños de texto excesivamente pequeños;
- usar
px para absolutamente todas las medidas sin considerar alternativas;
- confundir
em y rem;
- usar imágenes de fondo demasiado pesadas;
- olvidar
background-size: cover cuando se busca cubrir una sección;
- depender solamente del color para comunicar información importante.
Ejercicio para practicar
Partiendo de este HTML:
<article class="curso">
<h2>Curso de CSS</h2>
<p>
Aprendé a diseñar páginas web.
</p>
<a href="#" class="boton">
Comenzar
</a>
</article>
Intentá crear un estilo que:
- utilice una fuente sans-serif;
- defina un color de fondo oscuro;
- use texto claro;
- establezca el título en
2rem;
- use
line-height para mejorar la lectura;
- cree un botón azul;
- use
padding en em;
- utilice un ancho relativo y un
max-width.
Qué aprendimos
font-family;font-size;font-weight;font-style;line-height;- alineación y decoración del texto;
- HEX, RGB, RGBA y HSL;
- fondos e imágenes;
- gradientes;
px, %, em, rem, vw y vh;- herencia;
- contraste y legibilidad.
Seguí aprendiendo CSS
La guía anterior es:
Modelo de caja en CSS: width, height, margin, padding, border y box-sizing
El próximo paso es empezar a trabajar con Flexbox, una de las herramientas más importantes de CSS para distribuir y alinear elementos:
Flexbox en CSS: display flex, justify-content, align-items, gap y dirección →
¿Te sirvió esta guía? ☕
Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador.
🇦🇷 Apoyar desde Argentina
☕ Invitame un café con Mercado Pago
🌎 Apoyar desde otro país
☕ Apoyar con PayPal
