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 la introducción y una para cada cita.
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 se necesitan cuatro clases de párrafo.
clase intro: el primer párrafo, que dice quién fue Dijkstra.
clase estilo-1: la primera y cuarta cita
clase estilo-2: la segunda y quinta cita
clase estilo-3: la tercera y sexta cita
Fuentes
En este ejercicio se utiliza el tipo de letra genérico sans-serif.
Estilos
Al restablecer el estilo se pueden identificar las propiedades utilizadas:
Página (body):
color de fondo: background-color
tipo de letra: font-family
tamaño de letra: font-size
Título (h1):
color de letra: color
alineación: text-align Estrechando la ventana de manera que los refranes ocupen varias líneas podemos deducir la alineación del texto.
sombra: text-shadow
mayúsculas: text-transform
Párrafos en general (p):
alineación: text-align Estrechando la ventana de manera que los refranes ocupen varias líneas podemos deducir la alineación del texto.
Párrafo de introducción (p.intro):
borde: border
radio del borde: border-radius
margen izquierdo: margin-left
margen derecho: margin-right
margen interior: padding
color de fondo: background-color
Primera y cuarta cita (p.estilo-1):
borde: border
radio de la esquina superior izquierda del borde: border-top-left-radius
radio de la esquina inferior izquierda del borde: border-bottom-left-radius
margen derecho: margin-right
margen interior: padding
color de fondo: background-color
color de letra: color
Segunda y quinta cita (p.estilo-2):
borde: border
radio de la esquina superior izquierda del borde: border-top-right-radius
radio de la esquina inferior derecha del borde: border-bottom-right-radius