tutorial de HTML

Las hojas de estilo permiten controlar la presentación de una página web determinando el espacio entre las líneas de texto, el tipo y tamaño de las fuentes, el grosor de los márgenes, los colores usados y, además, el fomateo individual de cualquier etiqueta.

Como veremos más adelante, se pueden definir variaciones de diseño por medio de las “clases”. Si necesitáramo varios estilos de párrafos diferentes, se pueden definir clases para la etiqueta P, por ejemplo: P.normal, P.subrayado, P.tablas, etc.

Las hojas de estilo en cascada (CSS) permiten definir las reglas que utiliza el navegador para presentar una página web y esto lo podemos hacer de tres maneras diferentes:

• Añadiendo instrucciones de estilo a etiquetas concretas
• Incluyendo las instrucciones en el documento HTML de una página concreta
• Enlazando todos los documentos con un archivo de definición del estilo

Para agregar estilo a una etiqueta concreta, debemos añadirle el atributo STYLE que contendrá una serie de propiedades:

<P>
    Texto normal.
</P>
<P STYLE="margin-left: 30px; color:red">
    Texto en color rojo y con sangría.
</P>

De esta manera, variando la forma en que se comporta habitualmente la etiqueta P.

Todo el contenido del atributo STYLE se pone entre comillas, en cada propiedad, el valor se asigna mediante dos puntos (:) y las distintas propiedades se separan con un punto y coma (;).

Hay dos etiquetas que se usan junto con las hojas de estilo. <DIV> </DIV> y <SPAN> </SPAN> permiten agrupar un conjunto de elementos (párrafos, encabezados, listas, tablas, divisiones, etc) y declarar reglas de estilo para todas. Por ejemplo, el color de fondo de un conjunto de párrafos o el borde de una imagen.

DIV es un elemento en bloque, por ejemplo:

<DIV>
    [... etiquetas varias ...]
</DIV>

SPAN es un elemento en línea, permite agrupar varios elementos en línea seguidos dentro de un mismo bloque para después darles formato con la hoja de estilo. A menudo, la etiqueta SPAN se emplea para asignar clases a porciones de texto.

<SPAN>
    [... contenido ...]
</SPAN>

Si queremos cambiar la apariencia de una sección entera (que agrupe un conjunto de etiquetas), utilizamo la etiqueta DIV, y definimos el estilo globalmente:

<DIV STYLE="font-size: 16px; color: red">
    <P>Establecemos el color de la sección como rojo.</P>
    <P>La fuente tendrá 16 pixeles de alto.</P>
    <P>Y este será igual que los otros.</P>
</DIV>

Que se verá así:

Para modificar una de las etiquetas dentro del DIV y darle un estilo diferente, podemos establecer un estilo particular para esa etiqueta:

<DIV STYLE="font-size: 16px; color: red">
    <P>Establecemos el color de la sección como rojo.</P>
    <P>La fuente tendrá 16 pixeles de alto.</P>
    <P STYLE="font-size: 14px; color: black">
        Pero esta será diferente.
    </P>
</DIV>

El estilo dentro de una etiqueta tiene precedencia sobre el estilo del bloque. Es este orden de prioridades lo que le da el nombre de estilo en cascada (hay una cascada de métodos para aplicar los estilos, teniendo un orden de precedencia riguroso de unos sobre otros).

Algo similar podemos hacer mediante la etiqueta SPAN, aunque generalmente se usa para cambiar elementos más pequeños (palabras o letras), en lugar de bloques enteros. Por ejemplo:

<DIV STYLE="font-size: 16px; color: red;">
    <P>Establecemos el color de la sección como rojo.</P>
    <P>La fuente tendrá 16 pixeles de alto.</P>
    <P STYLE="font-size: 14px; color: black;">Pero esta será
        <SPAN style="font-size: 18px; color: green;">MUY</SPAN>
        diferente.</P>
</DIV>

Introducir el estilo en etiquetas concretas es sencillo de aplicar y es adecuado si sólo se desea hacer algúnn cambio puntual pero no es práctico ya que debemos examinar todo el documento en busca de etiquetas cuando queremos hacer algún cambio.

Para definir estilos globales en un documento HTML utilizamos la etiqueta <STYLE> </STYLE> dentro de la cual escribimos las propiedades. Por regla general, está ubicada en el HEAD del documento, pero también puede ser incluida en el BODY.

Esta etiqueta tiene un atributo TYPE que indica el tipo de medio en que va a ser publicado, en este caso será “text/css”.

<STYLE TYPE="text/css">
    [lista de propiedades]
</STYLE>

Este es un ejemplo de cómo se escribe un bloque de instrucciones de estilo:

<STYLE TYPE="text/css">
BODY {background: yellow; font-size: 12px;
    font-family: Arial; margin-left: 30px;}
H1 {background: blue; font-size: 16px;
    font-weight: bold; color: red}
H2 {font-size: 14px; font-weight: bold; color: red}
DIV {background: URL(fondo.jpg)}
</STYLE>

Se colocan las distintas etiquetas a las que se quiere dar un estilo y a continuación, englobadas por los signos “{” y “}” van las distintas propiedades con sus respectivos valores, separadas por un punto y coma.

Si STYLE se coloca en el HEAD, todas las etiquetas definidas tendrán el estilo indicado.

Si tuvieramos muchas páginas y quisiéramos darles a todas el mismo estilo, podríamos crear un vínculo a un archivo de texto que contenga las definiciones. Este archivo, que generalmente tiene la extensión CSS, sólo tendrá las propiedades pero no las etiquetas STYLE de inicio y ciere.

Para incluirlo en la página utilizamos la etiqueta <LINK />:

<LINK REL=stylesheet HREF="URL_archivo.css" TYPE="text/css">

Todos los métodos pueden aplicarse a la vez en una misma página Podemos tener un archivo externo genérico, una o varias etiquetas STYLE y usar el atributo style en etiquetas individuales.

Para evitar conflictos entre los distintos métodos, existe un orden de precedencia, es decir, cuál regla prevalecerá sobre la otra si dan definiciones contradictorias.

El orden de precedencia de mayor a menor es el siguiente:

• los estilos definidos dentro de una etiqueta con el atributo STYLE
• los estilos definidos por la etiqueta STYLE
• los estilos contenidos en los archivos externos