Lección 3: Selectores

Todo grupo de estilos debe apuntar a un o varias etiquetas HTML. Por ello los selectores CSS permiten seleccionar ciertos elementos de una página web para darles un estilo. En otras palabras: Los selectores están formados por un conjunto de reglas para identificar y aplicar los estilos.

Disponemos de diferentes tipos. Algunos son muy globales, específicos o por grupos.

etiqueta

Afecta a todas las etiquetas, sin discriminación alguna. Muy útil para definir un estilo común a todo un sitio.

body {
    color: orange;
}

p {
    color: green;
}

id

Solo sea aplica a una etiqueta y, además, solo se puede utilizar en una ocasión.

Esta formado por # + alias.

/* Empieza por # + alias */
#saturno {
    color: brown;
}

En tu documento debes utilizar el atributo id con el alias como valor.

<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<!-- Se aplica con el atributo "id". Omite # en su valor. -->
<p id="saturno">Lorem ipsum</p>
<p>Lorem ipsum</p>

No se recomiendo utilizarlo, que ya las id se reservan para JavaScript y es un antipatrón de CSS.

clases

Solo sea aplica a una o varias etiquetas. Puede repetirse tantas veces como sea necesario.

Esta formado por . + alias.

.mercurio {
    color: gray;
}

.marte {
    color: red;
}

.venus {
    color: yellow;
}

En tu documento debes utilizar el atributo class con el alias como valor.

<p class="mercurio">Lorem ipsum</p>
<p class="venus">Lorem ipsum</p>
<p id="jupiter" class="marte">Lorem ipsum</p>

Puedes utilizarlo tantas ocasiones como necesites.

Además, puedes aplicar varias clases a una misma etiqueta. Tan solo separa con espacios en su valor.

<!-- MAL -->
<p id="pluton" class="venus" class="marte">Lorem ipsum</p>

<!-- BIEN -->
<p id="pluton" class="venus marte">Lorem ipsum</p>

Siempre que puedas, usa clases para todo. Es una buena práctica. Aprenderás algunos patrones de CSS cuyos principios se apoyan en usar solo clases.

Actividad 1

Usa una lista para anotar que debes comprar en el supermercado. Si hay alguna fruta, cambia el color del <li> por el color de esa fruta. Para ello deberás crear estilos, usando clases, por cada color que necesites para después aplicarlo en el HTML.

Ejemplo.

<style>

.rojo {
    color: red;
}

</style>

<ul>
    <li>Agua</li>
    <li class="rojo">manzanas</li>
    <li>Galletas</li>
</ul>

Actividad 2

A partir del siguiente HTML añade colores, o cualquier otro estilo que has visto en los ejemplos, para darle un aspecto más atractivo. Tienes libertad creativa.

<!DOCTYPE html>
<html lang="es">
    <head>
	<meta charset="UTF-8">
	<title>Mis vacaciones</title>
    </head>
    <body>
	<h1>Tenerife (Islas Canarias)</h1>
	<h2>Subiendo a un volcán</h2>
	<p>Mis amigos y yo nos propusimos subir andando hasta la cima del volcán más alto de España: el Teide. El calor nos abraso y a los pocos minutos vaciamos todas las cantimploras. A la hora siguiente notamos como las lagartijas nos perseguían con cierta distancia mientras se relamian los labios. Parecía que esa noche iban a cenar caliente.</p>
	<p>Otra hora más tarde uno de mis amigos se torció el tobillo y decidimos abandonarlo a su suerte. Nunca más supimos de él, esperemos que esté en un sitio mejor.</p>
	<p>La siguiente hora notamos la ausencia del oxígeno. Respirábamos porque teníamos el hábito. Dos más cayeron en el olvido.</p>
	<p>La última hora notamos un poco de hambre de tanto andar. Optamos por el canibalismo.</p>
	<p>Solo quedé yo. ¡Qué vistas! Hasta podía ver la isla de Gran Canaria. Valió la pena cada zancada, camiseta escurrida, agujetas en las piernas y perdidas humanas. Estaba a tanta altura que casi podía tocar las estrellas con la punta de mis dedos. Era la oportunidad de maravillarme del volcan y encontrar nuevos amigos.</p>
    </body>
</html>