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
Etiquetas
Al desactivar la hoja de estilo se puede identificar las siguientes etiquetas:
una etiqueta de sección <h1> para el título.
varias etiquetas de párrafo <p>, una para cada greguería.
Al volver a aplicar la hoja de estilo no se identifican más etiquetas, pero puesto que los párrafos no son todos iguales, es que hay varias clases de párrafos <p>.
Clases
En total, hay cuatro estilos de párrafo <p> distintos, por lo que usaremos cuatro clases de párrafo <p>.
Podemos simplemente llamar a las clases a, b, c y d, o intentar afinar un poco más fijándonos en si los estilos están asignados al azar o hay alguna relación con el contenido o la posición. En este caso, parece que hay cierta relación entre el tema tratado por la cita y el estilo, lo que nos permite usar nombres de clases relacionados con el tema:
clase infancia: citas relacionadas con la infancia
clase animales: citas relacionadas con los animales
clase literatura: citas relacionadas con la literatura
clase numeros: citas relacionadas con los números
Fuentes
En este ejercicio se utilizan las fuentes genéricas:
clase infancia: fuente genérica serif
clase animales: fuente genérica sans-serif
clase literatura: fuente genérica monospace
clase numeros: fuente genérica cursive
Estilos
Al restablecer el estilo se pueden identificar las propiedades utilizadas:
Página (body):
color de fondo: background-color
tipo de letra: font-family
Título (h1):
tamaño de letra: font-size
mayúsculas iniciales: text-transform
Párrafo (p):
tamaño de letra: font-size
Citas relacionadas con la infancia (p.infancia):
color de letra: color
tipo de letra: font-family
cursiva: font-style
Citas relacionadas con los animales (p.animales):
color de letra: color
tipo de letra: font-family
Citas relacionadas con la literatura (p.literatura):