Cargando...

Clases en HTML

Tras div, las etiquetas class reutilizables enganchan estilos.

Por qué los nombres compartidos ganan

Mantienen estilos coherentes.

Respuesta directa

Escribe class="note", comparte, separa con espacios. En CSS .note. Sin # en el atributo.

📊 class in HTML vs CSS

Place	What you write	Role
HTML attribute	class="note"	Labels the element (no leading dot)
CSS selector	.note	Selects elements that have that class
Multiple names	class="card featured"	Space-separated list in HTML
Same idea in CSS	.card.featured	Element that has both classes (advanced combining)

Clase compartida en varios elementos

Dos párrafos con class="note".

Shared class

html

HTML Code

<p class="note">Save often.</p>
<p class="note">Use clear names.</p>
<style>
.note { color: #0b4; font-weight: 600; }
</style>

Lectura de la clase compartida

ambos note
.note selecciona el grupo

Varias clases en un elemento

card y featured juntos.

Multiple classes on one element

html

HTML Code

<div class="card featured">
<h2>Featured tip</h2>
<p>Classes can combine on one box.</p>
</div>
<style>
.card { padding: 12px; border: 1px solid #444; }
.featured { border-color: #0a7; }
</style>

Lectura de varias clases

dos tokens
.card + .featured

Hábitos de nombres

Cortos, claros, reutilizables.

Práctica

dos tip
estiliza .tip
segunda clase
corrige un typo

Errores fáciles

en class
comas en vez de espacios
.note en HTML

Resumen

class = gancho CSS/JS
compartir y combinar
siguiente: id

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓

Preguntas

🎯

70%

Para Aprobar

♾️

∞

Tiempo

🔄

∞

Intentos

📝 Instrucciones

Lee cada pregunta cuidadosamente
Selecciona la mejor respuesta para cada pregunta
Puedes repetir el quiz tantas veces como quieras
Tu progreso se mostrará en la parte superior

Idioma