🎨 Nivel 7 - Introducción a CSS

📖 Aprende CSS

🎨 ¿Qué es CSS?

CSS (Cascading Style Sheets) es el lenguaje para dar estilo y belleza a tu página web. Con CSS puedes cambiar colores, tamaños, fuentes, posiciones y mucho más.

💡 Tres formas de usar CSS

1. Inline: style="color: red;" directo en el elemento

2. Interno: Dentro de <style> en el head

3. Externo: En un archivo .css separado (recomendado)

🎯 Propiedades CSS más usadas:

🎨

color

🖼️

background

📏

font-size

📦

padding

↔️

margin

🔲

border

⭕

border-radius

✏️

font-family

🌈 Paleta de colores (clic para copiar):

🎯 Selectores CSS básicos:

elemento - Selecciona todas las etiquetas (p, h1, div)
.clase - Selecciona por class (.mi-clase)
#id - Selecciona por id (#mi-id)
* - Selecciona TODO

💻 Editor CSS Interactivo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Página con CSS</title>
    <style>
        /* 🌟 Estilo para todo el body */
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #667eea, #764ba2);
            min-height: 100vh;
            padding: 40px;
        }
        
        /* 🎯 Estilo para la tarjeta */
        .tarjeta {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 500px;
            margin: 0 auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        
        /* 📝 Estilo para el título */
        h1 {
            color: #ec4899;
            text-align: center;
            font-size: 2rem;
            margin-bottom: 20px;
        }
        
        /* ✏️ Estilo para párrafos */
        p {
            color: #333;
            line-height: 1.8;
            font-size: 1.1rem;
        }
        
        /* 🔘 Estilo para el botón */
        .boton {
            display: block;
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #ec4899, #db2777);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            margin-top: 20px;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .boton:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(236, 72, 153, 0.5);
        }
        
        /* 🏷️ Estilo por ID */
        #especial {
            background: #fef3c7;
            border-left: 4px solid #f59e0b;
            padding: 15px;
            border-radius: 0 10px 10px 0;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div class="tarjeta">
        <h1>🎨 Aprendo CSS</h1>
        
        <p>
            ¡Hola! Esta es mi primera página con estilos CSS.
            Puedo cambiar colores, tamaños y mucho más.
        </p>
        
        <div id="especial">
            💡 Este elemento tiene un ID único llamado "especial"
        </div>
        
        <p>
            CSS hace que las páginas web sean bonitas y 
            profesionales. ¡Es como pintar pero con código!
        </p>
        
        <button class="boton">🚀 ¡Clic aquí!</button>
    </div>
</body>
</html>

👁️ Vista Previa

Introducción a CSS

🎨 ¿Qué es CSS?

💡 Tres formas de usar CSS

🎯 Propiedades CSS más usadas:

🌈 Paleta de colores (clic para copiar):

🎯 Selectores CSS básicos:

🎛️ Controles de Estilo

1. ¿Qué propiedad cambia el color del texto?

2. ¿Cómo seleccionas un elemento con class="titulo"?

3. ¿Qué propiedad agrega espacio DENTRO de un elemento?