Ejercicio CSS 01: Conexión de CSS y Colores

🎯 Ejercicio: Conexión de CSS y Formatos de Colores

📋 Objetivo

Aprender a conectar CSS de las tres formas diferentes (externo, interno, en línea) y practicar los cuatro formatos de colores principales aplicándolos a diferentes elementos.

📝 Instrucciones

Copia la plantilla HTML que se proporciona abajo
Crea un archivo CSS externo llamado estilos.css
Aplica colores a los cuatro divs usando diferentes métodos:

Div 1: Color con CSS externo usando formato nombre de color
Div 2: Color con CSS interno usando formato hexadecimal
Div 3: Color con CSS en línea usando formato RGB
Div 4: Color con CSS externo usando formato HSL

Elige tus colores favoritos para cada div
Asegúrate de que cada div tenga una altura mínima para ver bien los colores

💡 Recordatorio de Formatos de Colores

Nombre: red, blue, green, orange, purple, etc.
Hexadecimal: #ff0000 (rojo), #00ff00 (verde), #0000ff (azul)
RGB: rgb(255, 0, 0) (rojo), rgb(0, 255, 0) (verde)
HSL: hsl(0, 100%, 50%) (rojo), hsl(120, 100%, 50%) (verde)

📄 Plantilla HTML

Copia este código y guárdalo como ejercicio01.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio CSS - Colores y Conexiones</title>
  <!-- 1. AQUÍ va el link al CSS externo -->
  <link rel="stylesheet" href="estilos.css">
  
  <!-- 2. AQUÍ va el CSS interno -->
  <style>
    /* Escribe aquí el CSS interno para el div 2 */
  </style>
</head>
<body>
  <h1>Ejercicio: Conexión de CSS y Colores</h1>
  
  <div class="caja-externa">
    <h2>Caja 1: CSS Externo + Color por Nombre</h2>
    <p>Esta caja usa CSS externo con color por nombre</p>
  </div>
  
  <div class="caja-interna">
    <h2>Caja 2: CSS Interno + Color Hexadecimal</h2>
    <p>Esta caja usa CSS interno con color hexadecimal</p>
  </div>
  
  <!-- 3. AQUÍ va el CSS en línea para el div 3 -->
  <div style="/* Escribe aquí el CSS en línea con RGB */">
    <h2>Caja 3: CSS en Línea + Color RGB</h2>
    <p>Esta caja usa CSS en línea con color RGB</p>
  </div>
  
  <div class="caja-hsl">
    <h2>Caja 4: CSS Externo + Color HSL</h2>
    <p>Esta caja usa CSS externo con color HSL</p>
  </div>
</body>
</html>