P谩ginas

馃敄 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 id debe 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.