Para aplicar estilos de manera efectiva, es fundamental comprender los selectores de CSS, que determinan los elementos HTML a los que se les aplicará el estilo. Exploremos los principales tipos de selectores.

Selector de etiqueta

Un selector de etiqueta selecciona todos los elementos de una determinada etiqueta, aplicando un estilo uniforme en toda la página.

Sintaxis: En el HTML, tenemos un elemento p:

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

Para aplicar estilos en el archivo CSS, utiliza el nombre de la etiqueta (p) como selector:

p {
  property: value;
}

Ejecuta el siguiente ejemplo y observa cómo funciona.

Selector de clase

Los selectores de clase permiten seleccionar elementos que comparten un nombre de clase, proporcionando un control más preciso.

Sintaxis: En el HTML, agregar un atributo class con un nombre de clase descriptivo:

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

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

.text {
  property: value;
}

Ejecutar el siguiente ejemplo y observar que solo los elementos con la clase text recibirán estos estilos, permitiendo un control más detallado sobre el diseño.

Todos los elementos con el atributo class="text" se estilizan con texto rojo, un tamaño de fuente de 24px y un fondo color trigo. El nombre de la clase text se define en index.css utilizando el prefijo ..

Composición de Clases

Es posible asignar múltiples clases a un solo elemento para lograr una mayor flexibilidad en el estilo.

Sintaxis: En el HTML, agrega varios nombres de clase a un elemento:

<p class="text font">A robot created chemicals.</p>

En el CSS, define los estilos para cada clase por separado:

.text {
  property: value;
}

.font {
  property: value;
}

Ejecuta el siguiente ejemplo para observar cómo funciona. Los elementos que tengan ambas clases, text y font, recibirán los estilos especificados.

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

Selector de Id

Los selectores de Id apuntan a un único elemento. Dado que los Id deben ser únicos, este método rara vez se utiliza para estilos.

Sintaxis: 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 {
  property: value;
}

Ejecuta el siguiente ejemplo y observa cómo funciona. Este ejemplo aplica estilos al elemento único con el id title.

El atributo id="title" identifica de manera única al elemento <p>, y los estilos definidos con el selector #title se aplican solo a ese elemento específico.