🔖 Uso del atributo id y el selector # en HTML y CSS
El atributo id se usa en HTML para identificar un elemento de forma única en la página. En CSS, el selector # sirve para aplicar estilos a ese elemento específico.
📌 ¿Cómo se usa?
<div id="miCaja">
Este es un div con un ID único.
</div>
#miCaja {
background-color: lightblue;
padding: 15px;
border: 2px solid navy;
text-align: center;
}
✅ Reglas importantes del atributo id
- 🔸 El valor de
iddebe ser único en toda la página. - 🔸 No se deben repetir varios elementos con el mismo
id. - 🔸 Se usa también para JavaScript y navegación interna.
🖌️ Diferencia entre class y id
| class | id |
|---|---|
| Puede usarse en múltiples elementos. | Solo debe usarse una vez por documento. |
Se selecciona con un punto . |
Se selecciona con una almohadilla # |
🎯 Ejemplo práctico completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<style>
#mensaje {
color: white;
background-color: green;
padding: 10px;
border-radius: 8px;
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<div id="mensaje">
¡Este es un mensaje único con ID!
</div>
</body>
</html>
🔗 Navegación interna con id
<a href="#seccion2">Ir a la Sección 2</a>
...
<h2 id="seccion2">Sección 2</h2>
🧠 Tip de buenas prácticas
🔹 Usa id solo cuando realmente necesites un identificador único, por ejemplo, para controlar un elemento con JavaScript o para anclas de navegación. Para estilos comunes, usa class.
Este conocimiento te ayudará a estructurar mejor tus páginas HTML y aplicar estilos más organizados.
