Utilizando un editor de páginas web como BlueGriffon y un documento base, redefiniremos el estilo de la etiqueta <p> y observaremos los cambios que se producen. Para realizar la edición, accederemos a la opción Propiedades de estilo del menú Paneles. En la ventana que se despliega utilizaremos las opciones de los paneles General y Colores para redefinir la etiqueta <p>. Antes de comenzar, debemos seleccionar la opción todos los elementos del mismo tipo en el cuadro Aplicar estilos a.

Podemos localizar un texto largo en la web del Proyecto Gutenberg (http://www.gutenberg.org), donde se pueden descargar libros completos cuyos derechos de copyright ya han vencido. De ese libro extraeremos un capítulo concreto, ya que el tratamiento del libro completo puede resultar ligeramente lento.

Estos cambios no los realizaremos con BlueGriffon, sino que definiremos los selectores directamente en el código fuente de la página, en la cabecera del documento.

Siguiendo con nuestro ejemplo, crearemos un enlace a la página desde la que tomamos el texto original y definiremos estilos para los diferentes estados posibles del enlace mediante los pseudoselectores.

Definiremos en la cabecera de la página al menos los estilos para a:link, a:hover y a:visited.

Crearemos una hoja de estilos externa, siguiendo los métodos analizados, y llevaremos a ella todos los estilos que hemos definido hasta el momento. Si encontramos alguna dificultad al hacerlo, siempre podremos recurrir a cortar los estilos con un editor de textos desde el archivo .html, para pegarlos posteriormente con el mismo editor en el archivo .css.

Una vez que los estilos han sido insertados en la página web, debemos eliminarlos de la cabecera de nuestras páginas, para evitar estilos duplicados. Los estilos deben permanecer únicamente en el archivo externo y en las páginas sólo tendremos un enlace a ese archivo.