Para aplicar estilos de manera efectiva, es fundamental comprender los selectores de CSS, que determinan los elementos HTML a los que se les aplicarán los estilos. A continuación, se presentan los principales tipos de selectores.

Selector de etiqueta

Una forma de aplicar estilos es utilizando la propia etiqueta del elemento. Los estilos especificados mediante un selector de etiqueta afectarán a todos los elementos con esa etiqueta. Esto resulta útil para aplicar estilos consistentes a elementos en todo el sitio web.

Sintaxis: En el HTML, se tiene un elemento p:

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

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

p {
  property: value;
}

Ejecuta el siguiente ejemplo y observa cómo funciona.

Selector de Clase

Una forma más precisa de aplicar estilos a los elementos es utilizando selectores de clase. Estos selectores apuntan a elementos con nombres de clase específicos, permitiendo aplicar estilos de manera selectiva.

Sintaxis: En el HTML, agrega un atributo class con un nombre de clase significativo:

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

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

.text {
  property: value;
}

Ejecuta el siguiente ejemplo y observa que solo los elementos con la clase text recibirán estos estilos, brindando un control más detallado sobre tu 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 un prefijo ..

Composición de Clases

También es posible combinar varias clases en un solo elemento, lo que convierte la composición de clases en una herramienta poderosa para aplicar estilos; los nombres de clase se separan con espacios en el atributo class.

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;
}

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

El elemento <p> que tiene tanto las clases text como font recibe los estilos de ambos selectores. La clase text establece el color en navy y la clase font define el tamaño de fuente en 24px.

Selector de Id

Aunque es posible utilizar el selector id para aplicar estilos, generalmente no se recomienda. Los ids deben ser únicos en una página, lo que limita su reutilización.

Sintaxis: En el HTML, agregar un atributo id a un elemento:

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

En el CSS, referenciar el id con un símbolo de almohadilla (#) para definir los estilos:

#title {
  property: value;
}

Ejecutar el siguiente ejemplo y observar su funcionamiento. 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 únicamente a ese elemento específico.