Curso de Internet - Hojas de estilo CSS
Redes de ordenadores y desarrollo de páginas web

Para facilitar el mantenimiento de nuestras páginas HTML y asegurarnos de que se mantiene cierta coherencia en su presentación de cara al usuario, podemos utilizar hojas de estilo CSS (Cascading Style Sheets).

Para emplear una hoja de estilo en la presentación de nuestra página web, sólo tenemos que incluir la siguiente etiqueta antes del cuerpo de nuestro documento HTML:

<link rel="stylesheet" type="text/css" href="style.css">

donde style.css es el fichero que contiene la hoja de estilo que se empleará para visualizar el documento HTML.

El texto de la hoja de estilo ha de escribirse de acuerdo a la siguiente sintaxis:

etiqueta {
  propiedad1: valor1;
  propiedad2: valor2;
}

etiqueta1, etiqueta2 {
  propiedad: valor;
}

.clase {
  propiedad: valor;
}

donde las etiquetas y las clases son las que se utilican en los documentos HTML, mientras que las propiedades aplicables a cada elemento y los valores que pueden tomar dichas propiedades están definidas en un estándar emitido por el W3C.

Por ejemplo, el cuerpo de esta página se visualiza con el siguiente estilo para dejar márgenes y mostrar una imagen de fondo:

body  
{
 background-image: url(http://elvex.ugr.es/decsai/internet/image/internet.jpg);
 color: #000000;
 margin-left: 10%;
 margin-right: 10%;
 margin-top: 5%;
 margin-bottom: 5%;
}

De hecho, el ejemplo que acabamos de ver se muestra utilizando un estilo especial (definido con la clase example) de la siguiente forma:

<table class="example">
...

.example
{
  background-color: #e0e0e0; 
}

Además, todo el texto de este documento aparece justificado a ambos márgenes porque en la hoja de estilo hemos escrito lo siguiente:

p, blockquote, li, td
{
 text-align: justify;
}

Por otro lado, también hemos modificado la forma en la que se visualizan los enlaces en una página (y cómo cambian al pasar el cursor del ratón sobre ellos, al menos si utilizamos como navegador el Internet Explorer de Microsoft):

a
{
  text-decoration: none; 
}

a:hover
{ 
  color: #009999; 
}

Jugando un poco con las posibilidades que nos ofrecen las hojas de estilo CSS se puede conseguir que nuestras páginas HTML estándar tengan buen aspecto sin tener que plagarlas de etiquetas auxiliares como font, las cuales lo único que consiguen es que el texto de nuestro documento HTML sea menos legible y más difícil de mantener.

• W3C: World Wide Web Consortium.
• Index DOT (CSS & HTML).
• Ejemplos CSS: fondos, tipos de letra, espaciado, listas, tablas...