En la cabecera <head> de la página hay que:
En la vista con estilo se reconocen agrupaciones con color de fondo común o con un borde común, para las que tiene sentido utilizar secciones.
El dibujo siguiente muestra una posible elección de elementos de secciones para esta página:
Los grupos de citas utilizan la etiqueta <section> aunque también podría haberse utilizado <article>, pero como he preferido usar <section> porque quizás para ponerlos en una página por separado habría que escribir algo más de información (de quién son las citas y que se trata de citas, por ejemplo).
Los <article> contienen títulos <h2>.
Además de las etiquetas que se muestran en la imagen del apartado anterior (<header>, <h1>, <main>, <section>, <h2> y <footer>), la página sólo contiene párrafos <p>.
No es necesario utilizar clases en este ejercicio.
Para distinguir los párrafos <p> de <header> de los <p> de <section>, se puede utilizar en la hoja de estilo el selector de descendientes section p.
En este ejercicio se utiliza únicamente el tipo de letra genérico sans-serif.
Las propiedades CSS utilizadas son las siguientes:
El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio Citas de G. K. Chesterton y abriendo el código fuente (Ctrl+U).
La hoja de estilo del ejercicio puede consultarse abriendo este enlace a la hoja de estilo del ejercicio Citas de G. K. Chesterton.
Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir el mismo resultado, por lo que la solución no es nunca única.