Ésta es la sección article de la página web
Uso de colores para texto y fondo
La sección header de la página tiene fondo gris (#DDD) y texto en negro, además de un borde superior en negro de 2px.
La sección article tiene fondo blanco, y el texto general tiene un color gris muy oscuro (#2B2B2B). Los encabezados son de diferentes tonalidades de verde azulado (Teal, LightSeaGreen y MediumTurquoise), y el texto enfatizado con la etiqueta <em> se ve en cursiva y de color gris pizarra (SlateGrey).
La sección nav tiene fondo gris pizarra claro (LightSlateGrey), texto en blanco y encabezados en gris pizarra oscuro (DarkSlateGrey). Al pasar el cursor sobre el menú, los distintos elementos cambian su fondo a gris pizarra y aparece un borde blanco de 1px alrededor.
La sección aside tiene un fondo con degradado que va en diagonal (de la esquina superior izquierda a la esquina inferior derecha) de gris pizarra claro a transparente, texto en gris pizarra oscuro y encabezados en blanco.
La sección footer tiene un fondo gris y texto en negro, ambos con opacidad al 50%.
Inclusión de tipografías externas
Hay tres tipografías de Google Fonts incluidas en la página: Titillium Web para el texto en general, Merriweather para el header y los encabezados, y Source Code Pro para el código.
Uso de distintos encabezados
En este ejemplo sólo he definido estilos para h1, h2 y h3 ya que no suelo utilizar el resto de tamaños de encabezado.
Esto es un h1
Esto es un h2
Esto es un h3
También he definido colores específicos para los encabezados de la sección nav (gris pizarra oscuro) y de la sección aside (blanco).
Uso de caracteres especiales
Ejemplo de código con caracteres especiales:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Caracteres espciales</title>
</head>
<body>
Algunos de los caracteres especiales que usamos en HTML son < > y &
</body>
</html>
Imágenes
En esta sección hay imágenes bitmap escaladas a diferentes tamaños, y con border circular punteado. En la sección aside hay más imágenes bitmap además de una imagen vectorial.
Vídeos
Aquí hay dos vídeos, el primero alojado en mi página web [fuente] y el segundo de YouTube.
Bordes
El ejemplo de código HTML en la sección de caracteres especiales está en una caja con borde a rayitas y las esquinas redondeadas con diferente radio según la diagonal.
La imágenes tienen un borde circular punteado y otro blanco (en realidad el segundo es un padding que deja ver el fondo blanco).