Clase sobre Clases en HTML y CSS¶

📌 ¿Qué son las clases en HTML y CSS?¶

Las clases en HTML y CSS nos permiten aplicar estilos a varios elementos al mismo tiempo. Son una forma eficiente de organizar y reutilizar estilos en una página web.

En HTML, las clases se definen con el atributo class. En CSS, se seleccionan usando un punto (.) seguido del nombre de la clase.

🏗 Cómo definir y usar una clase en HTML y CSS¶

Ejemplo básico¶

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Clases</title>
    <style>
        .destacado {
            color: white;
            background-color: blue;
            padding: 10px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p class="destacado">Este texto tiene la clase "destacado".</p>
    <p>Este texto no tiene clase.</p>
</body>
</html>

🔹 Explicación: - En HTML, el atributo class="destacado" se agrega al elemento. - En CSS, .destacado define el estilo para todos los elementos con esa clase.

🎨 Múltiples clases en un mismo elemento¶

Un elemento puede tener más de una clase, separadas por espacios:

<p class="destacado grande">Texto con dos clases.</p>

.grande {
    font-size: 30px;
}

En este caso, el texto será azul (por .destacado) y tendrá un tamaño de 30px (por .grande).

🔄 Diferencia entre Clases y IDs¶

Característica	Clase (`.clase`)	ID (`#id`)
Se aplica a	Varios elementos	Solo un elemento único
Se define con	`class="nombre"`	`id="nombre"`
Se usa en CSS con	`.nombre`	`#nombre`

Ejemplo de ID:

<p id="titulo">Este es un título único</p>

#titulo {
    font-weight: bold;
    color: red;
}

✅ Ejercicio para practicar¶

📌 Crea una página con estos elementos: ✅ Un título con la clase .titulo ✅ Un párrafo con la clase .parrafo ✅ Un botón con la clase .boton ✅ Usa CSS para darles diferentes estilos

Bonus: Usa múltiples clases en un elemento y prueba estilos combinados.

🎓 Conclusión¶

Las clases en HTML y CSS son fundamentales para aplicar estilos de manera eficiente y reutilizable. ¡Aprender a usarlas correctamente hará que tu código sea más limpio y organizado! 🚀