Editor

El <div> (o elemento HTML) nos ayuda a crear cajas o contenedores. Después, CSS necesita saber qué caja modificar. Para eso usamos id cuando es una caja única, y class cuando queremos repetir el mismo estilo en varias cajas.

1️⃣ ¿Para qué sirven id y class?

En HTML podemos ponerle nombres a los elementos para después localizarlos desde CSS.

CSS usa esos nombres para cambiar el color, tamaño, fondo, margen, alineación, bordes, etc.

Ejemplo:

<h1>Mundial 2026</h1>
<p>El mundial se realizará en México, Estados Unidos y Canadá.</p>

Así como está, CSS no distingue fácilmente qué elemento queremos modificar de forma específica.

Por eso usamos id y class.

2️⃣ ¿Qué es id?

Un id sirve para identificar un solo elemento único dentro de la página.

Se usa cuando un elemento no se repetirá.

Ejemplo en HTML:

<section id="inicio">
  <h1>Mundial 2026</h1>
  <p>Bienvenido al sitio informativo del Mundial 2026.</p>
</section>

En CSS se llama usando el signo #:

#inicio {
  background-color: lightgray;
  text-align: center;
}

Esto significa:

Al elemento que tenga id="inicio", aplícale fondo gris claro y centra el texto.

3️⃣ Regla básica del id

El mismo id no debe repetirse.

Incorrecto:

<section id="sedes">Ciudad de México</section>
<section id="sedes">Guadalajara</section>
<section id="sedes">Monterrey</section>

Correcto:

<section id="sedes-mexico">Ciudad de México</section>
<section id="sedes-guadalajara">Guadalajara</section>
<section id="sedes-monterrey">Monterrey</section>

Cada id debe ser único.

4️⃣ ¿Qué es class?

Una class sirve para aplicar el mismo estilo a varios elementos.

Se usa cuando queremos repetir un diseño.

Ejemplo en HTML:

<div class="tarjeta">
  <h3>Ciudad de México</h3>
  <p>Sede del partido inaugural.</p>
</div>

<div class="tarjeta">
  <h3>Guadalajara</h3>
  <p>Sede mexicana del Mundial 2026.</p>
</div>

<div class="tarjeta">
  <h3>Monterrey</h3>
  <p>Ciudad sede del torneo.</p>
</div>

En CSS se llama usando punto .:

.tarjeta {
  border: 1px solid black;
  padding: 15px;
  margin: 10px;
}

Esto significa:

A todos los elementos que tengan class="tarjeta", aplícales borde, espacio interno y margen.

5️⃣ Regla básica de la class

La misma clase sí puede repetirse muchas veces.

Correcto:

<p class="importante">México será país anfitrión.</p>
<p class="importante">Participarán 48 selecciones.</p>
<p class="importante">El torneo será en 2026.</p>

CSS:

.importante {
  color: red;
  font-weight: bold;
}

Los tres párrafos tendrán texto rojo y negritas.

6️⃣ Diferencia principal entre id y class

Elemento Se usa para En CSS se escribe con ¿Se repite?
id Un elemento único # No
class Varios elementos . Sí

7️⃣ Ejemplo completo

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mundial 2026</title>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>

  <header id="encabezado">
    <h1>Mundial 2026</h1>
    <p>Información básica del torneo.</p>
  </header>

  <section id="sedes">
    <h2>Sedes en México</h2>

    <div class="tarjeta">
      <h3>Ciudad de México</h3>
      <p>Estadio Azteca.</p>
    </div>

    <div class="tarjeta">
      <h3>Guadalajara</h3>
      <p>Estadio Akron.</p>
    </div>

    <div class="tarjeta">
      <h3>Monterrey</h3>
      <p>Estadio BBVA.</p>
    </div>
  </section>

</body>
</html>

CSS

#encabezado {
  background-color: green;
  color: white;
  text-align: center;
}

#sedes {
  background-color: lightgray;
}

.tarjeta {
  background-color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 15px;
}