añadir la etiqueta <metaname="viewport" ... > necesaria en dispositivos móviles
añadir la etiqueta <link rel="stylesheet" ... > de enlace a la hoja de estilo
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:
la página tiene un título principal <h1>
cada necrológica es un artículo <article>
en cada <article> hay:
un título <h2> con el nombre del fallecido
una división <div> con las fechas de nacimiento y muerte
una división <div> con una pequeña biografía del fallecido
Las necrológicas utilizan la etiqueta <article> porque cada necrológica tiene sentido en sí mismo y no necesita el resto de la página para su comprensión, pero también podría haberse utilizado <section>.
Etiquetas
Además de las etiquetas que se muestran en la imagen del apartado anterior (<h1>, <article>, <h2>, y <div>), la página sólo contiene párrafos <p>.
Clases
En la página hay dos tipos de artículos <article> (los dedicados a futbolistas/deportistas, de color marrón, y los dedicados a escritores, de color violeta)
En cada <article> hay dos secciones, la dedicada a los datos de nacimiento y muerte, de color de fondo más oscuro, y la dedicada a la biografía, de color de fondo más claro.
Así, se pueden definir cuatro clases:
clase futbol: para los <article> de Luis Aragonés y Alfredo Di Stéfano
clase literatura: para los <article> de Gabriel García Márquez y Ana María Matute
clase datos: para la <div> con el lugar y fecha de nacimiento y muerte
clase vida: para la <div> que comentan quién es cada persona
Para definir en la hoja de estilo cada tipo de sección en cada tipo de artículo, se deben utilizar selectores de descendientes:
article.futbol div.datos para la sección de datos en las necrológicas de futbolista
article.futbol div.vida para la sección de biografía en las necrológicas de futbolista
article.literatura div.datos para la sección de datos en las necrológicas de escritor
article.literatura div.vida para la sección de biografía en las necrológicas de escritor
Fuentes
En este ejercicio se utiliza el tipo de letra genérico sans-serif y las fuentes de Google Fonts Cabin Sketch y Gabriela, pero también se pueden cargar localmente.
Estilos
Las propiedades CSS utilizadas son las siguientes:
Fuentes web (@import)
Página (body):
color de fondo: background-color
tipo de letra: font-family
alineación: text-align
Título (h1):
margen: margin
color: color
tipo de letra: font-family
tamaño de letra: font-size
alineación: text-align
mayúsculas / capitales: text-transform
Título de 2º nivel (h2):
margen: margin
margen interior izquierdo: padding-left
margen interior inferior: padding-bottom
color: color
tipo de letra: font-family
tamaño de letra: font-size
Divisiones (div):
margen interior: padding
Párrafos (p):
margen: margin
División de vida (div.vida):
margen: margin
Artículo de fútbol (article.futbol):
borde: border
radio del borde: border-radius
margen: margin
color de fondo: background-color
Título en el artículo de fútbol (article.futbol h2):
radio del borde superior derecho: border-top-right-radius
color de fondo: background-color
División de datos en el artículo de fútbol (article.futbol div.datos):
color de fondo: background-color
Artículo de literatura (article.literatura):
borde: border
radio del borde: border-radius
margen: margin
color de fondo: background-color
Título en el artículo de literatura (article.literatura h2):
radio del borde superior derecho: border-top-right-radius
color de fondo: background-color
División de datos en el artículo de literatura (article.literatura div.datos):