Curso de Diseño Web VII - Añadiendo Estilo con CSS

noviembre 06, 2009

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. Hemos hablado del funcionamiento de Internet, los enlaces entre páginas, la metodología de trabajo cuando nos enfrentamos a un proyecto Web, la publicación nuestro proyecto Web en Internet, la inclusión de imágenes en nuestras páginas y la historia y estándares HTML. En esta entrada introducimos CSS.

Para aplicar estilo a nuestras páginas podemos usar el lenguaje de programación conocido como CSS. CSS es la abreviación de hoja de estilos en cascada. El siguiente código (explicado en los pasos a continuación) fija como rojo el color de fondo de los párrafos de nuestra página y nos permite ver el aspecto de CSS.

p { background-color: red;}

  1. Seleccionamos el elemento al que queremos aplicar estilo. En este ejemplo, el elemento <p>. Observe, que en CSS no se pone <> alrededor del nombre de la etiqueta.
  2. Especificamos la propiedad a la que queremos aplicar estilo, en este caso el color de fondo del elemento. En ingles background-color.
  3. Entre el nombre de la propiedad y el valor de la misma ponemos dos puntos.
  4. Para definir el color de fondo como rojo, fijamos el valor de la propiedad a red.
  5. Al final ponemos punto y coma
  6. Recuerde colocar todos los elementos de estilo para el elemento <p> entre {}.

Para añadir estilos CSS directamente en HTML, añada las etiquetas de apertura y cierre del elemento <style> con el atributo type de valor text/css en el elemento <head>. Esto se muestra a continuación:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <title>Rock and Beer Guadalajara</title> 
    <style type="text/css"> 
        
        p { background-color: red;} 
        
     </style> 
  </head> 
  <body> 
  ... 
  .. 
  . 
  </body> 
</html>

A menudo, nos va interesar que todas nuestras páginas usen las mismas reglas de estilo. Los periodicos, por ejemplo, usan a lo largo de todas sus páginas el mismo tamaño de letra para los encabezados, el mismo espacio entre lineas etc. ¿Cómo podemos hacer que todas nuestras páginas tengan las mismas reglas de estilo?. Imaginemos un portal con dos archivos; index.html (la página de inicio) y bebidas.html. Para lograr aplicar a ambas páginas las mismas reglas de estilo, realizaríamos los siguientes pasos:

  1. Sacar las reglas CSS del archivo index.html y colocarlas en un archivo llamado estilo.css.
  2. Crear un enlace externo a este archivo desde el archivo index.html
  3. Añadir el mismo enlace externo en el archivo bebidas.html

Usamos el elemento link para enlazar con información externa. En este caso enlazamos con un archivo externo de estilos. El código sería algo así:

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

Con el atributo type indicamos que el tipo de esta información es text/css. En otras palabras una hoja de estilos en cascada, un CSS. El atributo href indica donde se encuentra el archivo de estilos. En este caso un camino relativo, aunque podría ser una URL completa. El atributo rel especifica la relación entre el archivo HTML y lo que estamos enlazando. Estamos enlazando una hoja de estilos, por lo que le damos el valor stylesheet.

CSS permite agrupar declaraciones de estilo comunes para varios elementos en una sola regla. Por ejemplo:

 
h1 { 
    font-family: sans-serif; 
    color: gray; 
} 
h1 { 
    font-family: sans-serif; 
    color: gray; 
}

Es equivalente a:

 
h1, h2 { 
    font-family: sans-serif; 
    color: gray; 
}

Herencia

Sin duda la propiedad más interesante de CSS es la herencia de reglas de estilos entre elementos. Podemos imaginarnos nuestros archivos HTML como un árbol invertido de elementos que se anidan los unos en los otros. Si quisieramos fijar la tipografía de nuestras s de primer nivel a sans-serif escribiríamos una regla como la siguiente:

h1 { font-family: sans-serif;}

Con CSS, sólo podemos aplicar estilo a los elementos dentro del elemento body. Debido a esto los siguientes gráficos no muestran los elementos dentro de head. La regla anterior seleccionaría todo los elementos <h1> de la página. En este ejemplo sólo hay uno como se muestra en el siguiente gráfico.

Si quisieramos cambiar la tipografía de las s de primer y segundo nivel escribiríamos la siguiente regla.

h1, h2 { font-family: sans-serif;}

Ahora el selector selecciona todos elementos los <h1> y <h2>

Si quisieramos cambiar la tipografía de los parrafos escribiríamos la siguiente regla.

p { font-family: sans-serif;}

El selector se aplica a todos los elementos <p> del árbol. Más aún, los elementos anidados dentro de los parrafos como son <a>, <em> y <a> heredan también la propiedad font-family de sus elementos padres.
El elemento <img> es un hijo del párrafo, pero no tiene ningún texto por lo que no se ve afectado.

Usando la herencia de CSS, podemos simplificar las reglas de estilo que hemos usado en los ejemplos anteriores.

h1 { font-family: sans-serif;}
h2 { font-family: sans-serif;}
p { font-family: sans-serif;}

Podemos lograr el mismo efecto si movemos la propiedad font-family de los párrafos y cabeceras al elemento body. Ahora, todos los elementos anidados bajo body heredan la propiedad font-family. A continuación se muestra el código y el gráfico que ilustra el cambio.

body { font-family: sans-serif;}

¿Cómo sobreescribir una propiedad heredada?

La propiedad font-family se define en la regla body, de modo que cada elemento dentro de body la hererda. Puedes sobreescribir el valor de font-family que has heredado. Si decides usar, por ejemplo, la tipografía serif para los elementos <em>, el siguiente código lo lograría.

body { font-family: sans-serif;}
em { font-family: serif;}

El siguiente gráfico muestra ahora los elementos con la tipografía fijada en sans-serif. Puedes ver que el elemento em ya no esta afectado.

Resumen

  • CSS contiene declaraciones simples, llamadas reglas.
  • Una regla proporciona el estilo para una selección de elementos HTML.
  • Una regla típica consiste en un selector junto con un o más propiedades y valores.
  • El selector especifica a que elementos podemos aplicar la regla.
  • Cada propiedad finaliza con un punto y coma.
  • Todas las propiedades y valores van entre {}.
  • Puede seleccionar cualquier elemento usando su nombre como selector.
  • Separando mediante comas los nombres de elementos podemos seleccionar varios elementos a la vez.
  • Una de las maneras más fácil de incluir estilo en HTML es mediante la etiqueta <style>
  • Para portales Web de alguna complejidad, debería enlazar a una hoja de estilos externa.
  • El elemento <link> se usa para incluir una hoja de estilos externa.
  • Muchas propiedades se heredas. Por ejemplo, si una propiedad que se hereda se define para el elemento <body>, todo los elementos hijos de <body> la heredarían.
  • Siempre puede sobreescribir propiedades heredadas creando una regla más especifica para el elemento que queremos cambiar.
  • Puede validar usando el validador de CSS del W3C.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: ,

0 comentarios:

Publicar un comentario