En esta guía de CSS ejemplos aprendes lo esencial del CSS moderno con código copiable y probado. Nada de trucos viejos: te enseño el modelo de caja, unidades actuales, variables, Flexbox y Grid. Cada técnica va con un bloque que puedes pegar y adaptar hoy mismo.
Mi consejo antes de empezar: no memorices propiedades. Entiende cómo se comporta el navegador y copia los patrones que uso a diario. Con estos ejemplos maquetas una página completa sin frameworks.
Qué es CSS y cómo se enlaza al HTML
CSS es el lenguaje que da estilo a una página web. El HTML aporta la estructura y el CSS decide colores, tamaños, espacios y posición. Sin CSS, un sitio muestra solo texto negro sobre fondo blanco.
Tienes tres formas de aplicarlo, pero yo uso siempre la hoja externa. Separa el estilo del contenido y lo reutilizas en todas las páginas.
<!-- En el <head> de tu HTML -->
<link rel="stylesheet" href="estilos.css">
/* En estilos.css */
body {
font-family: system-ui, sans-serif;
color: #222;
}Evita el estilo en línea con el atributo style salvo para pruebas rápidas. Ensucia el HTML y complica el mantenimiento cuando el proyecto crece.
Selectores esenciales
Un selector apunta a los elementos que quieres estilar. Estos son los que necesitas el 90 % del tiempo.
/* Por etiqueta */
p { line-height: 1.6; }
/* Por clase (el más usado) */
.boton { background: #2563eb; }
/* Por id (único en la página) */
#cabecera { position: sticky; }
/* Descendiente: enlaces dentro de un nav */
nav a { text-decoration: none; }
/* Estado al pasar el ratón */
.boton:hover { background: #1d4ed8; }Prioriza las clases sobre los id. Las clases se reutilizan y evitan problemas de especificidad difíciles de deshacer. Reserva el id para anclas y elementos únicos.
El modelo de caja (box model)
Todo elemento en CSS es una caja con cuatro capas: contenido, padding (relleno interno), border (borde) y margin (margen externo). Entender esto te ahorra la mayoría de los dolores de cabeza al maquetar.
.tarjeta {
width: 300px;
padding: 20px; /* espacio dentro del borde */
border: 1px solid #ddd;
margin: 16px; /* espacio fuera del borde */
}Por defecto, el padding y el borde se suman al ancho. Yo aplico siempre esta regla al inicio para que el ancho declarado sea el ancho real.
*, *::before, *::after {
box-sizing: border-box;
}Unidades modernas: rem, %, vh/vw y clamp
Deja el píxel fijo para bordes y detalles pequeños. Para tamaños y espacios uso unidades relativas que se adaptan al usuario y a la pantalla.
- rem: relativa al tamaño base del documento. Ideal para fuentes y espacios.
- %: relativa al elemento padre. Útil para anchos de contenedores.
- vw / vh: porcentaje del ancho y alto de la ventana.
- clamp(): fija un mínimo, un valor ideal y un máximo en una línea.
h1 {
/* nunca menor de 1.8rem, ni mayor de 3rem */
font-size: clamp(1.8rem, 5vw, 3rem);
}
.seccion {
width: 90%;
max-width: 1100px;
min-height: 60vh;
}La función clamp() resuelve la tipografía responsive sin media queries. El texto crece con la pantalla y se detiene en los límites que marcas.
Colores y variables CSS
Las variables CSS (custom properties) guardan valores que reutilizas en toda la hoja. Cambias el color de marca en un sitio y se actualiza toda la web.
:root {
--color-marca: #2563eb;
--color-texto: #1f2937;
--espacio: 1rem;
}
.boton {
background: var(--color-marca);
color: #fff;
padding: var(--espacio);
}Defines las variables en :root para que estén disponibles en todo el documento. Este patrón es la base de cualquier sistema de diseño serio y facilita crear un modo oscuro más adelante.
Si trabajas la coherencia visual de tu proyecto, te vendrá bien mi guía sobre diseño web minimalista para elegir una paleta contenida.
Tipografía legible
Una buena tipografía se lee sin esfuerzo. Estos son los ajustes que aplico en casi todos los proyectos para un texto cómodo.
body {
font-family: system-ui, "Segoe UI", Roboto, sans-serif;
font-size: 1.125rem;
line-height: 1.6;
color: var(--color-texto);
}
p {
max-width: 65ch; /* líneas de lectura cómoda */
}La unidad ch mide caracteres. Limitar los párrafos a unos 65 caracteres por línea mejora mucho la lectura en pantallas anchas.
Flexbox con ejemplos
Flexbox alinea elementos en una fila o columna y reparte el espacio entre ellos. Es la herramienta perfecta para componentes en una dimensión: barras de navegación, botones o tarjetas.
Centrar cualquier cosa
Centrar en horizontal y vertical era un suplicio en 2017. Hoy son tres líneas.
.centrado {
display: flex;
justify-content: center; /* eje horizontal */
align-items: center; /* eje vertical */
min-height: 100vh;
}Una barra de navegación
<nav class="navbar">
<span class="logo">Mi web</span>
<ul class="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.menu {
display: flex;
gap: 1.5rem;
list-style: none;
}La propiedad gap separa los elementos sin márgenes manuales. El logo queda a la izquierda y el menú a la derecha con space-between.
Tarjetas que se ajustan
.tarjetas {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.tarjetas .item {
flex: 1 1 250px; /* crece, encoge, base 250px */
}Con flex-wrap las tarjetas saltan de línea cuando no caben. La regla flex: 1 1 250px hace que se repartan el ancho manteniendo un mínimo razonable.
CSS Grid con ejemplos
Grid trabaja en dos dimensiones a la vez: filas y columnas. Lo uso para el esqueleto de la página y para galerías. Flexbox y Grid no compiten; se complementan.
Layout de página completo
.layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-areas:
"cabecera cabecera"
"lateral principal"
"pie pie";
gap: 1rem;
}
.cabecera { grid-area: cabecera; }
.lateral { grid-area: lateral; }
.principal { grid-area: principal; }
.pie { grid-area: pie; }La unidad fr reparte el espacio sobrante en fracciones. Con grid-template-areas dibujas el layout con palabras, y se lee de un vistazo.
Galería que se adapta sola
.galeria {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}Este es mi patrón favorito de Grid. Con auto-fill y minmax la galería crea tantas columnas como quepan, sin una sola media query. Perfecto para mostrar iconos o texturas.
Diseño responsive mobile-first
Mobile-first significa escribir primero los estilos para móvil y añadir cambios para pantallas grandes con media queries. Es el enfoque que recomiendo porque obliga a priorizar el contenido.
/* Estilos base: móvil */
.contenedor {
display: grid;
grid-template-columns: 1fr;
}
/* A partir de 768px: tablet y escritorio */
@media (min-width: 768px) {
.contenedor {
grid-template-columns: 1fr 1fr;
}
}No olvides la etiqueta viewport en el HTML. Sin ella, el móvil intenta mostrar la versión de escritorio encogida.
<meta name="viewport" content="width=device-width, initial-scale=1">Un diseño responsive bien resuelto también ayuda al posicionamiento. Lo explico en mi guía de diseño web y SEO.
Transiciones y animaciones básicas
Una transición suaviza el cambio entre dos estados. Sutil y rápida: así se siente pulida sin distraer.
.boton {
background: var(--color-marca);
transition: transform 0.2s ease, background 0.2s ease;
}
.boton:hover {
transform: translateY(-2px);
background: #1d4ed8;
}Para movimientos repetidos uso @keyframes. Este ejemplo hace aparecer un elemento con un desplazamiento suave.
@keyframes aparecer {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.aviso {
animation: aparecer 0.4s ease-out;
}Anima solo transform y opacity siempre que puedas. Son las propiedades más baratas para el navegador y evitan tirones.
Buenas prácticas y errores comunes
- Aplica box-sizing: border-box desde el primer día.
- Usa clases reutilizables en lugar de abusar de los id.
- Prefiere gap a los márgenes manuales dentro de Flexbox y Grid.
- Evita !important: casi siempre esconde un problema de especificidad.
- No fijes alturas con píxeles; deja que el contenido mande.
- Centraliza colores y espacios en variables CSS.
El error más repetido que veo es querer controlarlo todo con posiciones absolutas. Con Flexbox y Grid resuelves el 95 % de los layouts sin recurrir a ello. La documentación de MDN Web Docs es la referencia que consulto cuando dudo de una propiedad.
Preguntas frecuentes
¿Aprendo antes Flexbox o Grid?
Empieza por Flexbox. Resuelve componentes en una dimensión y su lógica se entiende rápido. Grid llega después para el layout general de la página.
¿Necesito un framework como Bootstrap?
No para aprender. Con Flexbox, Grid y variables CSS montas layouts modernos sin dependencias. Un framework tiene sentido más tarde, cuando buscas velocidad en equipo.
¿Puedo copiar estos ejemplos de CSS directamente?
Sí. Todos los bloques de código de esta guía funcionan en los navegadores actuales. Pega, ajusta los colores a tu marca y prueba en el navegador.
¿Qué son las variables CSS?
Son valores reutilizables que declaras una vez, normalmente en :root, y llamas con var(). Cambias un color en un sitio y se actualiza en toda la web.
Con estos ejemplos ya tienes la base del CSS moderno. Abre tu editor, copia un bloque y modifícalo hasta que entiendas qué hace cada línea. Ahí es donde se aprende de verdad.
