Comentarios al ejercicio Citas de G. K. Chesterton

Cabecera

En la cabecera <head> de la página hay que:

Secciones

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:

body header h1 main section h2 section h2 section h2 footer

Los grupos de citas utilizan la etiqueta <section> aunque también podría haberse utlizado <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>.

Etiquetas

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>.

Clases y selectores

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.

Fuentes

En este ejercicio se utiliza únicamente el tipo de letra genérico sans-serif.

Estilos

Las propiedades CSS utilizadas son las siguientes:

Solución del ejercicio

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.