MÓDULO 1: DISEÑO

Dando Color y Vida

Si HTML es el esqueleto, CSS es la piel, la ropa y el maquillaje. Sin CSS, la web sería aburrida, blanca y negra (como en los 90s). CSS nos permite decir: "Quiero que este título sea azul y grande".

1. La Fórmula Mágica

CSS no se "ejecuta", son reglas. Tienes que memorizar esta estructura:

QUIÉN { QUÉ : CÓMO; }

Traducido a código real:

h1 {
    color: red;
    font-size: 50px;
}

Traducción: "Oye navegador, busca todos los títulos h1 (Quién), cambia su color (Qué) a rojo (Cómo), y su tamaño a 50 píxeles".

2. Los Selectores (¿A quién maquillo?)

Hay muchas formas de apuntar a un elemento, pero estas son las dos principales:

A. Selector de Etiqueta

Si escribes p { ... }, afectarás a TODOS los párrafos de la web. Es útil para cosas generales, pero peligroso si quieres ser específico.

B. Selector de Clase (.)

Esta es la forma profesional. Le pones un nombre (clase) a tu etiqueta HTML y luego la llamas en CSS con un punto.

HTML: <button class="boton-vip">Click</button>

CSS: .boton-vip { background: gold; }

3. Ejemplo Completo

/* Esto cambia el color de fondo de toda la web */
body {
    background-color: #222; /* Gris oscuro */
    color: white;       /* Texto blanco */
}

/* Esto estiliza nuestra clase personalizada */
.caja-alerta {
    border: 2px solid red;
    padding: 20px;    /* Espacio interior */
    border-radius: 10px; /* Bordes redondos */
}

🛠️ Tu Misión

En tu archivo index.html de la lección anterior:

  1. Añade esto dentro del <head>: <style> h1 { color: blue; } </style>.
  2. Guarda y recarga la página. ¿Tu título se volvió azul? ¡Acabas de escribir CSS!
← Volver Siguiente Lección →