1. El Arte del Estilo

CSS (Cascading Style Sheets) es el lenguaje que transforma documentos aburridos en experiencias visuales.

No es solo poner cosas bonitas. Es Ingeniería de Diseño. Decides cómo se distribuye el espacio, cómo responde la página en un celular, y cómo guías el ojo del usuario.
La palabra "Cascada" (Cascading) es clave: las reglas caen como una cascada. Si hay conflicto, la regla que está más abajo (o es más específica) gana.

2. Selectores: Apuntando al Blanco

Para estilizar algo, primero tienes que seleccionarlo. 

/* Selector de Etiqueta (Afecta a TODOS los p) */
p { color: red; }

/* Selector de Clase (El más usado. Afecta a quien tenga class="btn") */
.btn { background: blue; }

/* Selector de ID (Único por página. Afecta a id="header") */
#header { height: 100px; }
Pro Tip: Evita usar IDs para estilos. Tienen una "especificidad" muy alta y son difíciles de sobrescribir después. Usa Clases.

Evaluación 1: Jerarquía

Si tengo `p { color: red; }` y `.texto { color: blue; }` en el mismo párrafo, ¿qué color gana?

Rojo (Etiqueta)
Azul (Clase es más específico)
Se mezclan (Morado)

3. El Modelo de Caja (The Box Model)

En CSS, TODO es una caja. Incluso un texto circular o una imagen redonda vive dentro de una caja rectangular invisible.

Esa caja tiene capas, como una cebolla:

  1. Content: El corazón (texto, imagen).
  2. Padding: El relleno. Espacio entre el contenido y el borde. (Como la guata de una campera).
  3. Border: El límite visible.
  4. Margin: El espacio personal. Separa esta caja de sus vecinas.

4. Typography: Más que palabras

El 95% de la web es texto. Si tu tipografía es mala, tu diseño es malo. 

body {
    font-family: 'Inter', sans-serif; /* Fuente moderna */
    line-height: 1.6; /* Altura de línea para que respire */
    font-weight: 400; /* Grosor normal */
    color: #333; /* Nunca uses negro puro (#000), cansa la vista */
}
Usa fuentes externas como Google Fonts para salir de las aburridas Arial y Times New Roman.

5. Colores y Emociones

Los colores no se eligen al azar.

  • Hexadecimal: #FF5733. Para computadoras.
  • RGB/RGBA: rgba(0,0,0, 0.5). Útil para transparencias (Alpha).
  • HSL: hsl(200, 100%, 50%). Hue, Saturation, Lightness. El mejor para diseñar porque es intuitivo: "Quiero este azul, pero más oscuro".

Evaluación 2: Cajas

Quiero que el texto dentro de mi botón tenga más aire alrededor. ¿Qué propiedad aumento?

Margin
Padding
Border

6. Flexbox: El fin de las pesadillas

Antes, alinear cosas era un infierno. Hoy tenemos Flexbox.
Es un sistema unidimensional (Fila O Columna). 

.contenedor {
    display: flex; /* Activa la magia */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}
Con estas 3 líneas, has resuelto el problema más difícil de la historia del diseño web: el centrado vertical.

7. CSS Grid: El arquitecto

Si Flexbox es para líneas, Grid es para cuadrículas 2D completas. 

.galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    gap: 20px; /* Pasillos entre celdas */
}
Con Grid puedes diseñar layouts de revistas complejos en segundos.

8. Diseño Responsivo (Responsive)

Hoy en día, más gente navega en celular que en PC. Tu sitio DEBE adaptarse.
Usamos Media Queries para aplicar estilos condicionales: 

/* Por defecto: Móvil (Mobile First) */
h1 { font-size: 20px; }

/* Si la pantalla mide al menos 768px (Tablet/PC) */
@media (min-width: 768px) {
    h1 { font-size: 40px; }
}

Evaluación 3: Layouts

¿Cuándo usar Grid y cuándo usar Flexbox?

Flexbox para componentes lineales (navbar), Grid para la estructura macro (layout).
Son lo mismo, elige el que te guste.
Grid es antiguo, no se usa.

9. Position: Rompiendo el flujo

A veces quieres que un elemento ignore las reglas normales.

  • static: El default. Aburrido.
  • relative: Se mueve respecto a sí mismo.
  • absolute: Se mueve respecto a su padre posicionado. Es vital para poner íconos sobre imágenes.
  • fixed: Se pega a la pantalla (como ese molesto chat de soporte técnico).
  • sticky: Se comporta normal hasta que scrolleas, y entonces se pega.

10. Animaciones y Transiciones

El movimiento atrae la atención.
Transición: Cambio suave entre estado A y B (ej: hover). 

button {
    transition: background 0.3s ease;
}
Animación: Una película compleja con keyframes (como la que estás viendo ahora mismo al cambiar de slide).

11. Variables CSS (Custom Properties)

CSS moderno tiene variables nativas. ¡Ya no necesitas preprocesadores obligatoriamente! 

:root {
    --color-principal: #57C5B6;
}

button {
    background: var(--color-principal);
}
Si decides cambiar el color de tu marca, cambias una sola línea y se actualiza todo el sitio.

¡CSS Dominado!

Tu sitio ahora tiene estructura (HTML) y belleza (CSS). Pero es estático. Es como una pintura: puedes mirarla, pero no responde.

Para que cobre vida, para que cuando hagas click pase algo, para pedir datos, para crear magia... necesitas el cerebro. Necesitas JavaScript.