Selección de Elementos de Manera Sencilla

Para aplicar estilos, es necesario indicar a CSS qué elementos HTML se deben seleccionar. Esto se realiza mediante selectores. En este capítulo, se abordan los tres selectores más importantes: el selector de etiqueta, el selector de clase y el selector de id.

Selector de etiqueta

Un selector de etiqueta selecciona todos los elementos de una etiqueta HTML específica.
Ejemplo de HTML:

<p>It was all in my head.</p>

Ejemplo de CSS:

p {
  color: purple;
  font-size: 36px;
  background-color: pink;
}

Esta regla se aplica a cada elemento <p> en la página.

Utilizar selectores de etiqueta cuando se requiera un estilo uniforme para todos los elementos de ese tipo.

Selector de clase

Un selector de clase selecciona elementos que comparten el mismo nombre de clase.
HTML:

<p class="text">This song is another hit.</p>

En el CSS, se referencia el nombre de la clase con un punto (.) para definir los estilos:

.text {
  color: red;
  font-size: 24px;
  background-color: wheat;
}

Solo los elementos con class="text" reciben estos estilos.

Los selectores de clase son el tipo de selector más utilizado en proyectos reales porque permiten estilos flexibles y reutilizables.

Múltiples clases

Un elemento puede tener más de una clase.
HTML:

<p class="text font">We test multiple class names</p>

CSS:

.text {
  color: navy;
}

.font {
  font-size: 24px;
}

Si un elemento tiene ambas clases, recibe los estilos de ambos selectores.

Esto hace que la estilización basada en clases sea potente.

El elemento <p> con ambas clases text y font recibe estilos de ambos selectores. La clase text establece el color en azul marino, y la clase font define el tamaño de fuente en 24px.

Selector de ID

Un selector de ID apunta a un único elemento.

En el HTML, agrega un atributo id a un elemento:

<p id="title">Choose from different themes.</p>

En el CSS, referencia el ID con una almohadilla (#) para definir los estilos:

#title {
  font-weight: 500;
  font-size: 20px;
}

Los IDs deben ser únicos dentro de una página.

Aunque los IDs pueden usarse para estilos, generalmente se prefieren las clases por su consistencia y reutilización.