1. Selectores y Box Model: Las Reglas del juego
¿Qué es CSS?
CSS (Cascading Style Sheets) es el lenguaje que da estilo al HTML. Si el HTML es el esqueleto, el CSS es la piel, el pelo y el color de los ojos.
🎯 Los Selectores (¿A quién apunto?)
Para cambiar algo, primero tienes que seleccionarlo:
styles.css
CSS
1 /* Por etiqueta */
2 h1 { color: red; }
3
4 /* Por CLASE (recomendado) */
5 .mi-boton { background: blue; }
6
7 /* Por ID (único) */
8 #mi-logo { width: 100px; }
📦 El Box Model (Modelo de Cajas)
Todo en la web es una caja invisible. Aprender cómo funcionan sus capas es el 90% de saber maquetar:
El Mapa de la Caja
Margin (Margen): El espacio FUERA de la caja (separa de otros).
Border (Borde): El marco que rodea la caja.
Padding (Relleno): El espacio DENTRO de la caja (separa el texto del borde).
Content (Contenido): El texto o imagen real.
css
CSS
1 .test-caja {
2 padding: 20px;
3 border: 5px solid black;
4 margin: 10px;
5 }
