CSS Cheat Sheet - Guía rápida para desarrolladores

¡Hola devs! 👋
Les comparto esta cheat sheet de CSS con propiedades esenciales, atajos útiles y ejemplos prácticos para usar en el día a día. Ideal para quienes están aprendiendo o quieren repasar.

🎯 Selectores básicos

• /* Selecciona todo / .element / Por clase / #id / Por ID / div p / Descendiente / div > p / Hijo directo / div + p / Hermano adyacente */

📐 Box Model
element {
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid #000;
margin: 20px;
}

🧭 Posicionamiento
position: static; /* por defecto /
position: relative; / relativo a su posición original /
position: absolute; / relativo al contenedor padre posicionado /
position: fixed; / relativo al viewport /
position: sticky; / se mantiene fijo al hacer scroll */

🎨 Colores y fondo
color: #333;
background-color: #f4f4f4;
background-image: url("imagen.jpg");
background-size: cover;

✂️ Overflow y text
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

✍️ Tipografía
font-family: 'Roboto', sans-serif;
font-size: 1rem;
font-weight: bold;
text-align: center;
line-height: 1.6;

🔲 Display y flex
display: block | inline | inline-block | none;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-direction: column;

📱 Responsive (media queries)
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}

🎯 Atajos útiles
Atajo CSS Significado
m-0 margin: 0; (Tailwind-style)
p-2 padding: 0.5rem;
border-none border: none;
w-full width: 100%;

💡 Tip: Centrando con flexbox
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}