1. Introducción

Las páginas web se caracterizan por contar con una apariencia muy personalizada. El hecho de que se muestren habitualmente en una pantalla o en un dispositivo móvil permite a los creadores de páginas web desplegar toda su creatividad, más allá del habitual negro sobre blanco de los documentos destinados a ser impresos.

Quizás la parte más difícil de diseñar un sitio web sea la de encontrar un equilibro estético que consiga que nuestro contenido se realce gracias a la aplicación de un formato atractivo, en lugar de resultar el efecto contrario. Una página web con una mala combinación de colores o sin unos criterios claros a la hora de elegir el tamaño de texto, tipografía, etc. hace que el lector se predisponga de forma negativa hacia el contenido.

Para acertar al elegir la apariencia de una página web, debemos seguir algunas recomendaciones básicas:

• Especialmente al principio conviene no mezclar demasiados colores ni tamaños de letra. En los comienzos conviene mantener los diseños simples.
• La planificación es importante: realizar un boceto previo, definir los tamaños y colores con los que vamos a trabajar, etc.
• Otra clave para alcanzar una armonía es realizar muchas pruebas. Aunque en un momento determinado estemos conformes con el resultado, podemos realizar alguna prueba más para ver qué resultado obtenemos; quizás nos guste más.
• No importa cuántos efectos sepamos aplicar, no hace falta que lo demostremos en una misma página. Eso la recargará y hará que no sea agradable a la vista.
• La observación también resulta muy útil. Observando las combinaciones de color que podemos ver, por ejemplo, en un anuncio que nos resulte agradable, en otra página web, etc. podremos deducir por qué nos gusta y sacar conclusiones de ello.

Con estas ideas en mente y un poco de sentido común estaremos preparados para conseguir un sitio web que guste a nuestros usuarios, favoreciendo así una mejor asimilación de los contenidos que queremos mostrar.

2. Propiedades de texto

Podemos aplicar estilos dentro de un elemento concreto de la página web, por ejemplo un texto, mediante el parámetro style que se puede establecer para cualquier etiqueta. Observemos este ejemplo:

<h1>Qué entendemos por un párrafo</h1>
<p>Un párrafo de texto se compone de un bloque de texto independiente con una apariencia concreta, delimitado por un espacio superior y otro inferior.</p>

Vamos a modificar el aspecto de esos dos elementos HTML, con tan sólo incorporar el parámetro style en cada uno de ellos seguido de algunos valores.

<h1 style="color: rgb(200, 20, 20); font-family: Helvetica,Arial,sans-serif;">Qué entendemos por un párrafo</h1>
<p style="font-style: italic; color: rgb(20, 20, 200);">Un párrafo de texto se compone de un bloque de texto independiente con una apariencia concreta, delimitado por un espacio superior y otro inferior.</p>

Detengámonos un momento en cada caso:

• En el primero hemos establecido dos elementos CSS, color para definir un tono rojo y el tipo de letra mediante font-family.
• En el segundo, hemos indicado que todo el párrafo se mostrará en cursiva (font-style: italic) y en un tono azul, mediante el valor color.

Como se puede observar, cada par de elementos CSS especifican su valor correspondiente tras un signo de dos puntos y se separan del siguiente mediante un punto y coma; así podemos añadir tantas variaciones como necesitemos.

2.1. Tipo de letra

La propiedad font-family, seguida de una tipografía concreta o de una serie de tipos de letra separadas por comas, define la apariencia del elemento HTML en cuestión.

Hay muchos tipos de letra, pero un pequeño conjunto de ellos se usan con asiduidad, como el tipo Times New Roman, Helvética, Georgia, Arial, Verdana, etc. Cada uno tiene sus propias características. Normalmente los tipos sin serifa (como arial o verdana) suelen proporcionar una estética agradable y moderna, mientras que los que sí la tienen (como times) se suelen usar para textos largos, como libros o documentos más densos. La práctica nos irá marcando la pauta de qué tipo será el más adecuado en cada caso.

h1 {font-family: Georgia, "Times New Roman", Times, Serif;}
body {font-family: Helvetica, Arial, Sans-serif; }

Con este ejemplo estamos definiendo un formato concreto para toda la página y otro para los títulos. El resultado del ejemplo anterior sería el siguiente:

Al definir un valor para el cuerpo de la página, estamos estableciendo ese tipo de letra para todos los elementos excepto para aquellos en los que se indique otra cosa. Es una práctica muy habitual.

Normalmente siempre indicaremos un grupo de fuentes, ya que, si el navegador no tiene instalada la primera, recurrirá a las alternativas, hasta llegar a la última que hemos indicado, que define una fuente genérica. Las fuentes genéricas son serif, sans-serif, cursive, fantasy y monospace.

2.2. Tamaño de letra

Para el tamaño de letra se emplea la propiedad font-size.

body {font-size: 2em;}

En el valor, además de un número, indicaremos la medida que empleamos entre una de éstas:

• %: un porcentaje para el texto hará que varíen sus tamaños basados en el valor original. Por ejemplo, body {font-size: 80%; } hace que el texto se vea un 20% más pequeño de lo normal, mientras que un 150% lo incrementaría en un 50%.
• px, cm, pt o in: para indicar medidas en píxeles, centímetros, puntos o pulgadas. No suele ser muy apropiado, porque cada navegador puede mostrar diferencias en este sentido, aunque para definir estilos de impresión sí que nos dará unos valores más precisos.
• em: es el valor recomendado por el W3C, si queremos emplear valores fijos. 1em es su valor base y equivale a 16 píxeles. 2em sería el doble de tamaño .5em la mitad (es lo mismo que 0.5em), etc.
• Valores fijos: hay ciertos modificadores fijos que podemos emplear, que van de menor a mayor (xx-small, x-small, small, medium, large, x-large y xx-large). Éstos no necesitan un número y asignan siempre el mismo tamaño.
• Valores relativos: usando smaller (más pequeño) y larger (más grande) conseguimos que la tipografía aumente o disminuya su tamaño respecto a su valor original.

Los diferentes valores se pueden mezclar, pero finalmente lo más recomendable sería emplear una escala basada en porcentajes o en em.

Si en un documento incorporaremos el siguiente bloque:

body {font-size:100%;}
h1 {font-size:3em;}
h2 {font-size:2em;}
p {font-size:0.8em;}

Conseguiremos unos títulos grandes, con un texto general al 100% de su tamaño, es decir, a 1em y unos párrafos un poco más pequeños.

2.3. Estilo de fuente

La propiedad font-style puede tomar el valor normal, que es el predefinido, italic (equivalente a cursiva) o oblique (equivalente a oblícua), que inclina el texto a la derecha. Normalmente coinciden estos dos últimos resultados pero, según la tipografía, podría haber cierta variación.

¿Para qué querríamos el valor normal si ese es ya el valor predeterminado? Su sentido está en que, si hemos definido una etiqueta superior con ese valor en cursiva, el valor normal nos permitiría establecer que una parte de un contenido no se mostrase en cursiva. Así, si toda la página va a estar en formato italic, podríamos hacer que un párrafo o una clase concreta se mostrarse normal, indicando font-style:normal. Por eso casi la mayoría de las propiedades de CSS tienen la posibilidad de forzar el establecimiento de su valor predeterminado.

2.4. Texto en negrita

La propiedad font-weight especifica si el texto irá en negrita o no, con diferentes grados:

• bold: negrita.
• bolder y lighter: valor relativo que aplica un efecto más pronunciado en el primer caso o menos en el segundo.
• 100..900: también podemos indicar con un valor entre 100 y 900 el grado de "negrita" que queremos.
• normal: hace que el texto no se muestre en negrita, saltándose cualquier otra directriz marcada por otras normas.

2.5. Mayúsculas y minúsculas

La propiedad font-variant se emplea para forzar que un texto concreto se muestre en mayúsculas con tamaño de minúsculas, lo que se conoce como versalitas ("versal" es un sinónimo de mayúsculas).

Sus valores son normal o small-caps.

2.6. Espacios

La propiedad letter-spacing modifica el espacio entre los caracteres de una palabra y word-spacing hace lo mismo pero entre palabras.

Las medidas que se emplean en ambos casos son las mismas que ya vimos para el tamaño de letra. Además podemos emplear el valor normal para reestablecer cualquiera de los dos valores, si los hemos modificado en otro elemento.

Aquí tenemos algunos ejemplos:

p {letter-spacing:normal}
p {letter-spacing: 12 px}
p {letter-spacing: -.1em}
p {word-space: 1.5 em}
p {word-space: 3 em}

En el eje vertical podemos emplear la propiedad line-height para incrementar o reducir el espacio entre líneas. Las dos líneas siguientes modifican la separanción entre líneas de un párrafo:

p {line-height:1em}
p {line-height:2em}

Mientras que la primera elimina casi por completo el espacio entre líneas, la segunda pone el texto a doble espacio.

2.7. Mayúsculas y minúsculas

Con la propiedad text-transform podemos convertir un bloque de texto completo en:

• Mayúsculas: con el valor uppercase.
• Minúsculas: valor lowercase.
• Primera en mayúsculas, resto en minúsculas: capitalize convierte la primera letra de cada palabra a mayúscula.
• Dejar el texto como está: emplearemos el valor none.

2.8. Alineación entre elementos

La propiedad vertical-align nos será útil para definir la alineación entre dos o más elementos que no tengan la misma altura, por ejemplo, un texto y una imagen o textos de diferente tamaño.

Un ejemplo sería:

span.parte2 {vertical-align:baseline}
span.parte2 {vertical-align:top}
span.parte2 {vertical-align:-.6em}

Contamos con un amplio muestrario de parámetros, como se puede observar. Podemos definir valores relativos, absolutos o utilizar algunas palabras clave como top (alineación superior), bottom (inferior), baseline (se alinean sus lineas base), etc. Este tipo de propiedades se suele modificar con algún tipo de editor, por lo que no es necesario recordar todos sus valores.

2.9. Sangrado del texto

El sangrado (a veces denominado indentación, en referencia al término inglés) consiste en desplazar a la izquierda o a la derecha la primera línea de un párrafo. Con CSS se puede realizar mediante la propiedad text-indent, seguida de algún valor numérico absoluto o relativo.

Un ejemplo sería:

p {text-indent: 2.5em}
p {text-indent: 3%}

2.10. Alineación del texto

Otro factor clásico de cualquier editor de texto es su capacidad de alinear el texto horizontalmente a la izquierda, derecha, centrado o justificado. Con CSS se realiza mediante la propiedad text-align.

Es tan simple como añadir alguna regla de este tipo:

body {text-align: justify; }
h1 {text-align: right;}

Los valores posibles son left (izquierda, el predefinido), right (derecha), center (centrado) o justify (justificado).

2.11. Decoración del texto

La propiedad text-decoration cuenta con algunos valores para decorar una línea de texto. Por ejemplo, para un rótulo <h1>:

• h1{text-decoration:none;} elimina cualquier decoración que pueda tener un elemento.
• h1{text-decoration:underline;} el texto aparece subrayado.
• h1{text-decoration:overline;} el texto se presenta con una línea por encima.
• h1{text-decoration:line-through;} el texto se muestra tachado.
• h1{text-decoration:blink;} el texto parpadea, distrayendo la atención sobre el resto de la página. Se debe usar con mucho criterio.

Estas opciones se emplean con frecuencia para tachar un texto que ya no vale o para resaltar los estados de un enlace, mediante sus pseudoselectores.

2.12. Sombras

Con CSS3 es posible añadir sombras a un texto con la propiedad text-shadow; así de fácil:

h1 { text-shadow: rgb(90,90,90) 2px 2px 4px };

Lleva cuatro parámetros:

• Color: expresado de diferentes maneras, es además opcional.
• X e Y: los dos valores siguientes son obligatorios e indican la distancia de la sombra.
• Suavizado: el último valor es opcional y especifica lo difuminada que se mostrará la sombra.

3. Aplicando colores

Hasta el momento hemos obviado la gestión y aplicación del color, exceptuando pequeños ejemplos puntuales. Son varias las propiedades en las que podemos aplicar un color determinado, ya sea como fondo, como color de texto, para una sombra, etc. pero en todos los casos las formas de definir el color son similares.

Las propiedades que se emplean para definir el color del texto son las siguientes:

• color: para indicar el color del texto.
• background-color: para indicar el color de fondo de diferentes elementos, entre ellos de un texto.

3.1. Formas de definición del color

Al empezar a trabajar con hojas de estilo, encontraremos que el método más sencillo para definir un color es mediante su nombre en inglés (especialmente si tenemos unas nociones básicas de inglés; en caso contrario encontraremos este método muy complicado).

Por ejemplo, para definir un texto de color rojo de una clase determinada utilizaríamos esta regla:

.parrafodestacado {color:red; }

Un título azul y con el fondo amarillo se conseguiría así:

h1 {color:blue; background-color:yellow; }

Y que toda la página tuviese un color lila, con fondo verde y sombra azul oscura, se consigue así:

body { color:purple; background-color: green; text-shadow: midnightblue 2px 2px 4px; }

3.2. Definir un color numéricamente

El sistema de nombres de color se nos quedará corto rápidamente y necesitaremos buscar alguna solución para definir colores de una forma precisa.

En los ordenadores, en las pantallas, se emplea un sistema de representación del color basado en tres parámetros. Un ordenador es capaz de representar varios millones de colores con tan sólo realizar combinaciones de tres colores básicos: el rojo, el verde y el azul.

Hay otros sistemas de representación de colores, pero el basado en estos tres, conocido como sistema RGB (son las siglas de los tres colores en inglés, red, green y blue) nos servirá perfectamente para diseñar nuestros propios colores.

La definición de un color en formato RGB consiste en indicar qué cantidad de cada uno de esos colores debe llevar el color resultante, sabiendo que el valor más bajo representa la ausencia de color y el color más alto el blanco absoluto.

El color más alto dependerá de la medida que estemos empleando. Podemos hacerlo mediante números decimales que van del 0 al 255 o mediante valores porcentuales.

Veamos algunos ejemplos:

• p {color:rgb (255,0,0); } representa el rojo puro. El valor de r está al máximo mientras los demás están al mínimo.
• p {color:rgb (0,0,0); } este color sería el negro; todos los valores al mínimo.
• p {color:rgb (190,190,0;)} éste sería un amarillo claro, pero no el más claro posible, que se obtendría con (255,255,0). La combinación de rojo y verde en una pantalla proporciona el amarillo.
• p {color:rgb (255,255,255;)} es el blanco.
• p {color:rgb (66,66,66;)} cuando los tres tonos se mezclan a partes iguales, obtenemos siembre un color gris, más o menos oscuro, dependiendo de lo elevados que sean los valores.

Todos los ejemplos anteriores también pueden ser expresados en valores porcentuales. Por ejemplo:

p {color: rgb (100%, 0%, 0%); }
p {color: rgb (80%, 80%, 0%); }
p {color: rgb (33%, 33%, 33%); }

3.3. Colores hexadecimales

Empleando la lógica del formato RGB, se emplea con frecuencia la definición de colores basada en valores hexadecimales, en lugar de decimales. Es decir, en vez de utilizar valores que van de 0 a 255, utilizamos valores que van de 00 a FF. Los códigos hexadecimales emplean los valores del 0 al 9, más la A, B, C, D, E y F.

En este caso el número se precede del signo #.

Los ejemplos anteriores quedarían así:

p {color: #ff0000; }
p {color: #bbbb00; }
p {color: #424242; }

Encontraremos este tipo de notación en muchos sitios. Produce unos códigos muy breves y que se descifran con rapidez, una vez que nos hemos acostumbrado a leerlos. De hecho, aún se pueden abreviar más, empleando un solo valor para definir cada color, pero reduce mucho el número de colores que podemos obtener, por lo que es mejor mantener el sistema de dos cifras para cada componente de color.

3.4. Ayuda para la definición de colores

En Internet encontramos muchas herramientas para definir conjuntos de colores, lo que se conoce como una paleta de colores. Más que mezclar colores al azar, es conveniente elegir colores siguiendo algunas reglas básicas. Hay toda una teoría de uso del color que nos permite saber qué colores combinan bien con cuáles.

Además de tomar como referencia aquellas páginas que nos gusten, podemos recurrir a herramientas, como este par de ejemplos:

• Adobe Kuler: http://kuler.adobe.com/
• Color Blender: http://www.colorblender.com/

• Ha llegado el momento de que demuestres lo aprendido. Puedes visitar estas dos webs para obtener más información y ejemplos de cómo usar los estilos:
  • http://msdn.microsoft.com/es-es/library/ee371223(v=expression.40)
  • http://msdn.microsoft.com/es-es/library/ee371193(v=expression.40)
• Crea un nuevo documento HTML y guárdalo como misformatos.htm.
• Crea toda la estructura básica del documento, recuerda: <!DOCTYPE html>, <html>,<head>... Puedes revisar el primero que hiciste.
• Añade las etiquetas meta para el autor, descripción y palabras claves.
• Añade la etiqueta de título con el texto "Mis primeros formatos".
• Escribe en el documento el siguiente texto dentro del <body>:

<p>1. Esto es un párrafo al que vamos a aplicar estilos</p>
<p>2. El texto de este párrafo está en negrita y mayúsculas</p>
<p>3. Este párrafo está parpadeando</p>
<p>4. En este párrafo la palabra &quot;colores&quot; tiene un color de fondo y está en rojo.</p>
<p>5. Este párrafo está alineado a la derecha y tiene un espaciado entre letras de 20 píxeles</p>

Ahora vas a aplicar distintos estilos:

• Añade al primer párrafo, a la etiqueta <p> la propiedad style="font-family:Verdana, Geneva, sans-serif; font-size:2em; font-style:italic"
• Ahora añade al segundo párrafo dentro de la etiqueta <p> la propiedad style="font-weight:bold; text-transform:uppercase"
• En el tercero añadiremos style="text-decoration:blink". Hay que tener en cuenta que esta propiedad no se ve en todos los navegadores.
• En el cuarto párrafo vamos a fijar un estilo sólo para una palabra. Para esto tendrás que usar una etiqueta auxiliar, la etiqueta <span></span>, esta etiqueta se puede poner en cualquier punto del párrafo sin que pase nada y en ella podemos aplicar los estilos que queramos que se apliquen a lo que quede entre su apertura y cierre. Dejaremos este párrafo con el siguiente aspecto: <p>4. En este párrafo la palabra <span style="color:red; background-color:yellow">&quot;colores&quot;</span> tiene un color de fondo y está en rojo.</p>
• Para acabar añadiremos al quinto párrafo style="letter-spacing:20px; text-align:right"
• El código resultante es el siguiente:

• Guarda los cambios.
• Y el resultado en el navegador es:

• Hemos aplicado varios estilos dentro de cada etiqueta style. Tu trabajo ahora es :
  • Escribir 10 frases a continuación de los 5 párrafos que hemos utilizado
  • Aplicar las 5 primeras por lo menos 10 estilos diferentes a nivel de párrafo.
  • Aplicar las 5 última por lo menos 10 estilos diferentes a nivel de palabra.
  • Por último añade una nueva línea en la que apliques dos estilos a nivel de párrafo y dos estilos particulares a dos palabras separadas dentro del párrafo.
  • No vale usar los de los ejemplos, tienes que cambiar algo.
• Guarda los cambios y sube el archivo a la plataforma.