Hoja de Trucos de CSS
Última actualización
Selectores
Cómo apuntar a los elementos a los que quieres dar estilo.
| Selector | Coincide con |
|---|---|
* | Todos los elementos |
p | Todos los elementos <p> (por etiqueta) |
.btn | Elementos con class="btn" |
#main | El elemento con id="main" |
div p | Todos los <p> dentro de un <div> (descendiente) |
div > p | Solo los hijos directos |
a:hover | Enlaces sobre los que se pasa el cursor (pseudoclase) |
li:first-child | Primer <li> de su padre |
li:nth-child(2n) | Cada <li> par |
input[type="text"] | Campos de entrada con ese atributo |
p::before | Contenido generado antes de <p> (pseudoelemento) |
Modelo de caja
Cada elemento es una caja: contenido, padding, borde, margen.
| Propiedad | Qué hace |
|---|---|
width / height | Tamaño de la caja de contenido |
padding | Espacio dentro del borde |
border | 1px solid #333: ancho, estilo, color |
margin | Espacio fuera del borde |
box-sizing: border-box | Hace que el ancho incluya el padding + el borde |
margin: 0 auto | Centra un elemento de bloque horizontalmente |
overflow: hidden | Recorta el contenido que se desborda |
Tipografía y color
| Propiedad | Ejemplo |
|---|---|
color | color: #333: color del texto |
background | background: #fff o una imagen/degradado |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (o rem, em) |
font-weight | 400 (normal) … 700 (negrita) |
line-height | 1.5: espaciado entre líneas |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
Maquetación unidimensional: filas o columnas. Establece display: flex en el padre.
| Propiedad (en el contenedor) | Qué hace |
|---|---|
display: flex | Convierte los hijos en elementos flex |
flex-direction | row (por defecto) o column |
justify-content | Alinea a lo largo del eje principal (center, space-between) |
align-items | Alinea a lo largo del eje transversal (center, stretch) |
gap | Espacio entre elementos, p. ej. gap: 16px |
flex-wrap | wrap permite que los elementos pasen a nuevas líneas |
flex: 1 (en un hijo) | El elemento crece para llenar el espacio disponible |
Grid
Maquetación bidimensional. Establece display: grid en el padre.
| Propiedad | Qué hace |
|---|---|
display: grid | Convierte los hijos en elementos grid |
grid-template-columns | 1fr 1fr 1fr o repeat(3, 1fr) |
grid-template-rows | Define los tamaños de las filas |
gap | Espacio entre filas y columnas |
grid-column | 1 / 3: extiende un elemento a través de columnas |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) para grids responsivos |
place-items: center | Centra cada elemento en su celda |
Posicionamiento y display
| Propiedad / valor | Qué hace |
|---|---|
position: static | Por defecto: en el flujo normal |
position: relative | Desplazado de su posición normal |
position: absolute | Posicionado respecto al ancestro posicionado más cercano |
position: fixed | Fijado al viewport |
position: sticky | Se adhiere al alcanzar un umbral al hacer scroll |
top / right / bottom / left | Desplazamientos para elementos posicionados |
z-index | Orden de apilamiento (mayor = encima) |
display: none | Elimina el elemento de la maquetación |
display: inline-block | Fluye en línea pero acepta ancho/alto |
Transiciones y transformaciones
| Propiedad | Ejemplo |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0): mover |
transform: scale | scale(1.1): redimensionar |
transform: rotate | rotate(45deg) |
opacity | 0 (invisible) … 1 (opaco) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px: esquinas redondeadas |
Unidades y diseño responsivo
| Unidad / función | Significado |
|---|---|
px | Píxeles absolutos |
% | Relativo al padre |
rem | Relativo al tamaño de fuente raíz |
em | Relativo al tamaño de fuente actual |
vw / vh | 1% del ancho / alto del viewport |
fr | Fracción del espacio libre (grid) |
@media (max-width: 600px) { … } | Aplica reglas por debajo de un punto de quiebre |
Selectores, el modelo de caja, flexbox, grid y las propiedades que siempre olvidas, en una sola página. Esta hoja de trucos de CSS es una referencia rápida para dar estilo y maquetar páginas web, desde apuntar a los elementos hasta centrarlos.
Todo lo que hay aquí es CSS estándar que funciona en los navegadores modernos. Copia una regla o pruébala en vivo en el playground de HTML, donde puedes editar CSS con una vista previa instantánea.
Preguntas frecuentes sobre la hoja de trucos de CSS
¿Esta hoja de trucos de CSS es gratis?
Sí. Esta hoja de trucos de CSS es gratuita y sin registro. Guárdala en favoritos y úsala cuando necesites consultar un selector, una propiedad o un patrón de maquetación.
¿Debería usar flexbox o grid?
Usa flexbox para maquetaciones unidimensionales: una fila de botones, una barra de navegación, elementos en una sola línea o columna. Usa grid para maquetaciones bidimensionales en las que controlas filas y columnas a la vez, como el diseño de una página o una galería de tarjetas. Funcionan bien juntos: es común una cuadrícula de tarjetas donde cada tarjeta usa flexbox internamente.
¿Cómo centro un div con CSS?
La forma moderna más sencilla es usar flexbox en el padre:
display: flex; justify-content: center; align-items: center; centra a un hijo tanto horizontal como verticalmente. Para centrar solo horizontalmente un elemento de bloque con un ancho definido, margin: 0 auto aún funciona.¿Puedo practicar CSS en línea?
Sí. Abre el playground de HTML para escribir HTML y CSS juntos con una vista previa en vivo. Cuando quieras estructura, el curso interactivo y gratuito de CSS de Coddy cubre los selectores, el modelo de caja, flexbox y grid paso a paso.
¿Esta hoja de trucos es buena para principiantes?
Sí. Avanza desde los selectores y el modelo de caja (los fundamentos) hasta flexbox, grid y las transiciones, de modo que puedes empezar con las secciones de arriba e ir avanzando hacia la maquetación moderna.
Recursos relacionados
Más hojas de referencia
