Unidad 8. Ejercicio paso a paso: Utilizar pseudoclases CSS

Objetivo

El último párrafo de la página nosotros.html contiene una cita con el nombre del autor.

No te entretengas a arrancar flores para guardarlas. Sigue andando y las flores alegrarán tu camino. Rabindranath Tagore.

Vamos a formatearlo, utilizando una pseudoclase para que tena el siguiente aspecto:

Ejercicio

Lo primero es preparar el HTML.

1. Pon el nombre del autor en un párrafo distinto, desde el código fuente o desde la vista normal, pulsando Intro antes del nombre.
2. Pon ambos párrafos en una división con la clase cita.

El HTML te habrá quedado así:

<div class="cita">
<p>No te entretengas [...] tu camino.</p>
<p>Rabindranath Tagore.</p>
</div>

Ahora vamos con el estilo CSS, en el que habrá un estilo distinto para la cita y otro para el autor.

1. Declaramos el selector div.cita, y le damos las propiedades generales (font-style: oblique;) y las específicas del segundo párrafo (font-size: 60%; text-align: right;).
2. Ahora, para referirnos al primer párrafo, vamos a utilizar la pseudoclase :first-child, que se refiere al primer hijo, al primer elemento de dentro. Declara el selector div.cita :first-child, y asígnale las propiedades propias de ese párrafo (text-align: center; font-size: 120%;).

Por supuesto, también podríamos haber declarado una clase para alguno de los párrafos.