Tabla de contenidos
En este capítulo se presenta lo relacionado con agregarle algo de estilo a los documentos HTML. Para tal fin, se explicarán las formas de incluir estilo en el código HTML y se hará una pequeña introducción a hojas de estilo CSS (Cascading Style Sheets).
La forma más habitual de agregarle algo de estilo a los documentos HTML es por medio de atributos para los elementos a los cuales se aplica el estilo. Esta forma solamente se recomienda cuando se están haciendo páginas para navegadores que no tienen soporte para hojas de estilo CSS. Esto ocurre con versiones muy antiguas de navegadores Web como Internet Explorer y Netscape. En la actualidad, los navegadores en sus versiones recientes ya tienen soporte para hojas de estilo, de forma que no hay necesidad de incluir atributos para darle formato al documento, como los de este ejemplo:
Ejemplo 5.1. Agregando atributos de estilo al elemento BODY de un documento
<body bgcolor="white" background="textura.jpg" text="black">
Los atributos bgcolor (color de fondo),
background (fondo) y text (color del texto)
pertenecen a atributos de estilo para la etiqueta BODY.
Para comenzar con hojas de estilos, es importante mencionar que en
HTML existe un elemento dedicado para mantener la descripción del estilo
dado al documento. Este elemento se invoca con la etiqueta
<style> y se ubica en el encabezado del documento, es
decir, dentro del elemento <head>. Por
ejemplo:
Ejemplo 5.2. Configuración simple de color de letra y de fondo del documento
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mi título</title>
<style type="text/css">
body { color: black; background: white; }
</style>
</head>
<body>
Bla bla bla
</body>
</html>
En el contenido del elemento <style> se
ingresan reglas de estilos, que tienen
una sintaxis especial. Para cada regla, primero va el nombre de la
etiqueta a la cual se aplica, luego entre llaves({}) las distintas
propiedades del estilo. Cada propiedad se ingresa como clave-valor,
donde la clave (el nombre de la propiedad) va al lado izquierdo, el
símbolo de dos puntos en el medio, y el valor de la propiedad a la
derecha, finalizando con el símbolo de punto y coma.
En el ejemplo anterior, la etiqueta a la que aplica la regla de
estilo es <body>, por lo que se pone su nombre, y hay
dos propiedades, cada una con su respectivo valor. Particularmente son
colores, entonces más adelante se explicará cómo asignar valores de
colores a las propiedades que los usan.