9. Dale Estilo a tu Página Web

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Dale Estilo al Texto [Jan. 16, 2012, 8:58 p.m.]


Si has estado siguiendo los retos del Trisfera Summer Camp, ya debes tener:

  • Bosquejos de cómo quieres que se vea tu sitio 
  • HTML escrito para cada una de tus páginas
     
En este reto vas a aprender cómo darle estilo a un sitio web, de manera que tus páginas se vean tal como las bosquejaste.
 
Digamos que tenemos el siguiente documento HTML:
 
<html>
<head>
  <meta charset="utf-8" />
  <title>Dándole Estilo al Texto</title>
</head>
<body>

  <h1>Queremos que el encabezado esté subrayado</h1>

  <p>Este es nuestro primer párrafo. Queremos que tenga alineación a la derecha y que el texto sea en "itálica" de color verde.</p>

  <p>Este es nuestro segundo párrafo. Queremos que tenga alineación justificada y que el texto sea en "negrita" de color rojo. Para ver el efecto de la alineación justificada, tal vez tengas que achicar el tamaño de tu navegador.</p>

</body>
</html>
 
Como podrás observar en el ejemplo, los navegadores asignan estilos por defecto, que no siempre se ajustan a nuestro diseño. En este caso, queremos que el encabezado esté subrayado en vez de usar negrita. También queremos darle colores y alineaciones diferentes a cada párrafo.
 
Todo esto se puede solucionar con CSS (Cascading Style Sheets), que es el lenguaje utilizado en la web para darle estilo al HTML.
 
Color
 
Para modificar el color de un texto, CSS define una propiedad llamada "color", que acepta valores en cualquiera de estos formatos:
  • Usando el nombre del color en inglés - color: green
  • Hexadecimal - color: #00FF00
  • RGB - color: rgb(0,255,0)
     

Si modificamos los párrafos para agregarles color, quedarían de esta manera:

<p style="color:green;">Este es nuestro primer párrafo. Queremos que tenga alineación a la derecha y que el texto sea en "itálica" de color verde.</p>

<p style="color:#FF0000">Este es nuestro segundo párrafo. Queremos que tenga alineación justificada y que el texto sea en "negrita" de color rojo. Para ver el efecto de la alineación justificada, tal vez tengas que achicar el tamaño de tu navegador.</p>
 
Cuando abras el archivo en el navegador, debes ver algo como esto.
 
Text-Align
 
Para darle alineación al texto, CSS define una propiedad llamada "text-align", que acepta los siguientes valores:
  • left - Alineación a la izquierda
  • right - Alineación a la derecha
  • center - Alineación centreada
  • justify - Alineación justificada
     

Si le agregamos alineación a los párrafos, quedarían de esta manera:

<p style="color:green; text-align:right;">Este es nuestro primer párrafo. Queremos que tenga alineación a la derecha y que el texto sea en "itálica" de color verde.</p>

<p style="color:#FF0000; text-align:justify">Este es nuestro segundo párrafo. Queremos que tenga alineación justificada y que el texto sea en "negrita" de color rojo. Para ver el efecto de la alineación justificada, tal vez tengas que achicar el tamaño de tu navegador.</p>
 
Y debemos ver algo como esto en el navegador.
 
Otras propiedades para el texto
 
Otras propiedades que podemos utilizar para modificar el texto son:
  • font-weight - controla qué tan gruesa o delgada debe ser la letra.
  • font-size - controla el tamaño de la letra.
  • font-style - nos permite definir si el texto estará en itálica o normal.
  • text-decoration - nos permite dar estilos como subrayado y tachado.
     

Utilizando estas reglas, podemos modificar nuestro documento HTML para que quede de esta manera:

<html>
<head>
  <meta charset="utf-8" />
  <title>Dándole Estilo al Texto</title>
</head>

<body>

  <h1 style="font-size:1.2em; font-weight:normal; text-decoration:underline;">Queremos que el encabezado esté subrayado</h1>

  <p style="color:green; text-align:right; font-style: italic">Este es nuestro primer párrafo. Queremos que tenga alineación a la derecha y que el texto sea en "itálica" de color verde.</p>

  <p style="color:#FF0000; text-align:justify; font-weight:bold;">Este es nuestro segundo párrafo. Queremos que tenga alineación justificada y que el texto sea en "negrita" de color rojo. Para ver el efecto de la alineación justificada, tal vez tengas que achicar el tamaño de tu navegador.</p>

</body>
</html>
 
Y cuando lo abrimos en el navegador, debemos ver algo como esto.
 
Antes de pasar a la siguiente tarea, tómate un par de minutos para  investigar qué otros valores se pueden utilizar para darle estilo al texto con CSS. Prueba con diferentes combinaciones para ver qué resultados puedes conseguir.
 
Cuando te sientas un poco más cómodo con el CSS, puedes empezar a darle estilo a tus páginas para que se parezcan más a tus bosquejos.