1. Preguntas comunes antes de iniciar
2. Nuevos tags y atributos para manejar las hojas de estilo.
3. Creando una hoja de estilo dentro de un documento, el tag <STYLE>.
4. Definiendo la apariencia de ciertos tags en una hoja de estilo.
5. El tag <SPAN> y sus usos.
6. El tag <DIV> y sus usos.
7. Definiendo estilos particulares.
8. Definiendo clases de estilos.
9. Definiendo estilos contextuales.
10. Definición de estilos directamente o "al vuelo", el atributo "style".
11. Definición de una hoja de estilo en un archivo externo.
12. Conclusión de este capítulo.

¿Qué es una hoja de estilo?
Una hoja de estilo es un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML. En otras palabras una hoja de estilo nos permite indicar por ejemplo el tamaño de la fuente, color y estilo de cierto párrafo que nosotros indiquemos, mediante la definición de estilos y aplicación de los mismos.

¿Si existen tags para formatear texto y otros elementos para qué sirven las hojas de estilo?
Las hojas de estilo se usan porque tienen muchas ventajas sobre los tags tradicionales, ya que por ejemplo es posible crear una sola hoja de estilo que compartan muchos documentos, y al hacer un cambio en la hoja de estilo todos los documentos que la usan tendrán la apariencia deseada. También se puede tener control sobre ciertos aspectos que antes no se tenia, por ejemplo se pueden definir los márgenes de un documento o párrafo, o definir el espacio entre caracteres.

¿Las hojas de estilo eliminan los tags para dar apariencia al texto HTML?
Se puede decir que si, ya que la ultima especificación del HTML, HTML 4.0, desaprueba el uso de los principales tags para formatear texto y sus atributos, como por ejemplo el tag <FONT>, <CENTER>, entre otros. El hecho de que esta especificación desapruebe esos tags indica que posiblemente en la próxima especificación de HTML (actualmente bajo desarrollo bajo el nombre código "Cougar"), estos tags quedarán obsoletos.

¿Cuales son las desventajas de las hojas de estilo sobre los tags tradicionales?
Teóricamente no existe ninguna desventaja para las hojas de estilo, ya que por donde se vea son muy superiores a los tags de estilo tradicionales. Por el momento la única desventaja es que solo los navegadores de cuarta generación apoyan las hojas de estilo, como por ejemplo Netscape Communicator 4.01 o posteriores, y Microsoft Internet Explorer 4.0, Internet Explorer 3.0 también ofrece cierto apoyo a las hojas de estilo en cascada.
Los  lanzamientos de Internet Explorer 5.0 y Communicator 5.0 estandarizarán el uso de las hojas de estilo en poco tiempo.

¿Cuál es la importancia de las hojas de estilo?
Las hojas de estilo son la innovación más importante al HTML (también se usan en otros lenguajes como XML y SGML), ya que le dan capacidades que nunca tuvo, entre otras mencionaremos...
El uso de diversas unidades de medición pixeles, puntos, picas, mm, en los principales elementos del HTML, como son tablas, fuentes, bordes y en general los elementos que tenían atributos como "size" "height" "width".
El posicionamiento de bloques de texto en cualquier parte del documento HTML, ya que es posible definir en diversas unidades la posición de un bloque de texto.
Mejor control sobre las fuentes que es necesario para otras tecnologías relacionadas como la fuentes dinámicas.
El poder cambiar las características de una hoja de estilo mediante el uso de lenguajes de programación web como "Javascript" o "VB script".
Las hojas de estilo son la base de la implementación estándar del HTML dinámico o DHTML.

¿Cuales son los tipos de hojas de estilo?
Existen actualmente dos tipos de hojas de estilo, las hojas de estilo tipo "CSS" (cascading style sheet) y las hojas de estilo en Javascript, este tutorial básico esta enfocado en las hojas de estilo CSS porque son mas populares, son estándar en todos los browsers que soportan hojas de estilo y además porque no es necesario tener conocimientos de programación para manejarlas.

2. Nuevos tags y atributos para manejar las hojas de estilo.

Para manejar las hojas de estilo se han agregado nuevos tags y atributos al HTML, afortunadamente son pocos.

Los tags nuevos son:

<STYLE> que sirve para definir una hoja de estilo dentro de un documento HTML.

<SPAN> que sirve para definir un bloque de texto o elementos a los cuales se aplicará un estilo.

Los atributos nuevos son:

"style" que permite usar las características de una hoja de estilo directamente a un bloque de texto o elementos.

"class" permite marcar un bloque de texto o elementos como miembro de una clase de estilo definida en una hoja de estilo.

"id" sirve para identificar un bloque de elementos o texto y aplicar un estilo definido en una hoja de estilo para ese elemento.

Estos tags y atributos serán explicados detalladamente mas adelante.

3. Creando una hoja de estilo dentro de un documento, el tag <STYLE>.

Para crear una hoja de estilo dentro de un documento se usa el tag <STYLE>, este tag se usa en la cabeza del documento, es decir después del tag <HEAD> y antes del tag </HEAD>, este tag tiene un atributo que deben usarse para un mejor funcionamiento de la hoja de estilo. Esta tabla muestra el tag <STYLE> y el significado de los valores posibles de sus atributos.

Atributo	Valor posible	Ejemplo de uso	Significado
type	"text/css" para cascading style sheet o "text/javascript" para Javascript.	<STYLE type=text/css">	Este atributo le dice al navegador que tipo de sintaxis usa la hoja de estilo.

Aunque no es necesario se recomienda usar el atributo "type". A continuación se muestra como se usa el tag <STYLE>.

Ejemplo

<HTML>

<HEAD>

Diversos datos de la cabeza del documento.....

<STYLE type="text/css">

<!--

Definición de los diversos estilos y sus características.

-->

</STYLE>

</HEAD>

<BODY>

Contenido del documento...

</BODY>

</HTML>

Como se puede ver el tag <STYLE> esta en la cabeza del documento como lo indicamos en la parte anterior, este tag debe cerrarse, porque el navegador considera todo lo que se escribe después del primer tag como parte de un hoja de estilo.

También se puede ver que se usaron los signos de comentario <!-- --> , los símbolos de comentario se usan para ocultar la hoja de estilo de los navegadores que no soportan hojas de estilo.

4. Definiendo la apariencia de ciertos tags en una hoja de estilo.

Para definir las características o apariencia de un tag en una hoja de estilo, se debe usar el nombre del tag acompañado de los símbolos "{" y "}" de la siguiente forma:

<STYLE>

<!--

H1 {Definición de la apariencia de este tag...}

P {Definición de la apariencia para este tag...}

-->

</STYLE>

Como se puede ver la definición del estilo para el tag debe incluirse entre los tags <STYLE> y los signos de comentario, luego se escribe el nombre del tag (sin usar los símbolos "<" y ">"), un espacio después o junto se abren las llaves "{" y "}" dentro de las cuales se incluirán los atributos de estilo que se indiquen. Se pueden definir varios estilos para diversos tags, en el ejemplo anterior los estilos que se definieran se aplicarían a los tags <H1> y <P>.

Ejemplo:

<STYLE>

<!--

H3 {color:#ff0000; font-style:italic; text-align:center;}

/*Esta hoja define la apariencia para el tag <H3> */

-->

</STYLE>

Luego en el documento se usa el tag por ejemplo de la siguiente forma:

<H3>Tag headline 3 color rojo y centrado.</H3>

el navegador interpreta el tag usando la definición de la hoja de estilo de la siguiente forma.

Como puede verse el navegador usa algunas caracteristicas predeterminadas del tag <H3> además de usar las que se definieron en la hoja de estilo.

En el ejemplo hay un comentario escrito entre los símbolos "/*" y "*/" (signos familiares en C/C++, Java y Javascript), estos símbolos sirven para incluir comentarios dentro de una hoja de estilo, todo lo que se escriba dentro de estos símbolos se considerara comentario y no tendrá ningún efecto dentro del estilo.

Lo que se incluye entre las llaves "{" y "}" son las propiedades del estilo, en este ejemplo "color:#ff0000" se refiere al color del texto, "font-style:italic" indica que la fuente será cursiva, "text-align:center" indica que el texto va centrado.

Quizá no queden claro del todo estas propiedades, mas adelante explicaremos las diversas propiedades y sus posibles valores.

A continuación explicaremos como deben escribirse las propiedades de un estilo

estilo {propiedad:valor; propiedad:valor;

propiedad:valor;

propiedad:valor;

propiedad:valor;}

A continuación se presenta otro ejemplo:

<HTML> <HEAD> <TITLE>Un simple ejemplo</TITLE> <STYLE type="text/css"> <!--- H1{color:red;} BLOCKQUOTE{color:blue;} CENTER{color:olive;} --> </STYLE> </HEAD> <BODY> <H1>Tag Headline 1 con texto rojo.</H1> <BLOCKQUOTE>Aplicación del tag "blockquote" con texto azul.</BLOCKQUOTE> <CENTER>Texto centrado de color verde oliva.</CENTER> </BODY> </HTML>

El navegador interpreta el documento anterior así:

Tag Headline 1 con texto rojo. Aplicación del tag "blockquote" con texto azul. Texto centrado de color verde oliva.

Espero que con los anteriores ejemplos haya quedado claro como aplicar estilo a los tags existentes en HTML, de lo contrario lea por favor otra vez la parte anterior, también puede enviarme un e-mail para aclarar sus dudas a [email protected]. Recuerde que mas adelante se explicarán con detalle las diversas propiedades de los estilos.

5. El tag <SPAN> y sus usos.

Como lo mencionamos anteriormente el tag <SPAN> es uno de los nuevos tags que se han agregado al HTML para poder manejar y aplicar estilos, este tag se usa para marcar bloques de texto, por ejemplo:

<SPAN> El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu. </SPAN>

El tag <SPAN> por si mismo no tiene ningún efecto, hasta que se usa alguno de sus atributos, la siguiente tabla muestra esos atributos.

Atributo	Valor	Ejemplo	Significado
id	Una palabra que identifique el nombre de un estilo	<SPAN id="rojillo">	En este ejemplo se asigna el estilo llamado "rojillo" .
class	Una palabra que de nombre a una clase de estilo.	<SPAN class="describe">	En este ejemplo se identifica como miembro de la clase "describe" a cierto bloque de texto
style	Diversos atributos en formato CSS	<SPAN style="color:red; text-align:center;">	En el ejemplo anterior se aplica directamente un estilo a cierto bloque de texto.

Los atributos "id" y "class" no son exclusivos del tag <SPAN>, se pueden usar el mayoría de los tags del HTML, el atributo "style" también se puede usar en la mayoría de los tags, este ultimo se explicará mas adelante.

6. El tag <DIV> y sus usos.

El tag <DIV> no es del todo nuevo, en HTML 4 este tag también funciona con los atributos "id", "class" y "style", el tag <DIV> se puede usar como alternativa al tag <SPAN>, la única diferencia entre estos dos tags es que el tag <DIV> provoca un salto de linea al terminar de definir un párrafo, y el tag <SPAN> deja el texto que va después de su uso inmediatamente después que este termina.

7. Definiendo estilos particulares.

A veces es necesario definir un estilo que solo se aplicará en una parte del documento y no a todos los tags de cierto tipo u otras partes del documento. Para solucionar el problema anterior se definen estilos particulares de la siguiente forma:

1. Se usa el símbolo "#" antes del nombre de estilo e inmediatamente después (sin espacios) el nombre del estilo.
2. Se puede usar cualquier nombre de estilo de una sola palabra, siempre y cuando no exista ya un estilo con ese nombre.
3. Se usan las llaves "{" y "}" de la misma forma que en los ejemplos anteriores.
4. Para aplicar el estilo se debe de usar un tag con el atributo "id" cuyo valor sea el nombre del estilo, para un estilo particular no se puede usar el atributo "class".

<STYLE>

<!--

#mi_estilo{color:red; text-align:left;}

-->

</STYLE>

Luego se aplica el estilo en el documento.

<SPAN id="mi_estilo">Este párrafo usa un estilo definido</SPAN>

Como se puede ver se define el estilo en la hoja de estilo y posteriormente se debe aplicar a través de un atributo "id" en cualquier tag solo una vez. A continuación se muestra otro ejemplo:

<HTML> <HEAD> <TITLE>Otro estilo</TITLE> <STYLE type="text/css"> <!-- BODY{background-color:gray;} #estilouno{color:navy; text-align:center;} #estilodos{color:red; text-align:right;} #estilotres{color:blue;} --> </STYLE> </HEAD> <BODY> <SPAN id="estilouno">Este texto esta definido usando un estilo</SPAN> <DIV id="estilodos">Este texto también esta definido usando un estilo.</DIV> <P id="estilotres">Este texto también.</P> </BODY> </HTML>

El navegador interpretaría el documento anterior así:

Este texto esta definido usando un estilo. Este texto también esta definido usando un estilo. Este texto también.

Como se puede ver en la hoja de estilo se definieron tres estilos particulares que después se aplicaron usando el atributo "id" en diversos tags, también se definió el estilo del tag <BODY> que define las caracteristicas del cuerpo del documento.

8. Definiendo clases de estilos.

Se puede definir un estilo que no se aplicará solo a cierta parte del documento o a ciertos tags, si no a muchos otros elementos de un documento, esto se logra definiendo una clase de estilo de la siguiente forma:

1. Una clase de estilo se define usando  un punto e inmediatamente después el nombre que tendrá la clase de estilo, tambien se puede usar un "*" antes del punto. Se podría usar la palabra "all" antes del punto, pero esto no trabaja con Microsoft Internet Explorer 5.0.
2. Se usan las llaves y propiedades de la misma forma que en los ejemplos anteriores.
3. El estilo se aplica en diversas partes del documento a través del atributo "class" usado en varios tags, el valor del atributo "class" será el nombre de la clase de estilo.

<STYLE type="text/css">

<!--

 .nuestro_estilo{color:blue; text-align:center;}

-->

</STYLE>

Luego se aplica el estilo usando el atributo "class" en uno o mas tags.

<DIV class="nuestro_estilo">Nuestro estilo aplicado aqui</DIV>

<P class="nuestro_estilo">Estilo aplicado otra vez.</P>

<H1 class="nuestro_estilo">Otra vez aplicamos el estilo.</H1>

Un ejemplo mas complejo es:

<HTML> <HEAD> <TITLE>Un ejemplo mas</TITLE> <STYLE> <!- - BODY{background-color:red;} .nuestro_estilo{color:white; text-align:center;} #titulo{color:yellow;} .otro{color:aqua;} --> </STYLE> </HEAD> <BODY> <DIV id="titulo">TITULO</DIV> <SPAN class="nuestro_estilo"> El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu. </SPAN> <p class="otro"> Otro estilo, otro estilo, otro estilo</p> <SPAN class="nuestro_estilo"> Otra vez aplicamos nuestro estilo</span> <DIV class="otro">Aplicar estilos</DIV> </BODY> </HTML>

El navegador interpretará el documento anterior así:

TITULO El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu. Otro estilo, otro estilo, otro estilo Otra vez aplicamos nuestro estilo Aplicar estilos

En el ejemplo anterior se definieron dos clases de estilos y un estilo particular ademas del estilo del cuerpo del documento.

9. Definiendo estilos contextuales.

Ya vimos como especificar la apariencia de ciertos tags, como crear un estilo y aplicarlo a diversas partes del documento, y como crear un estilo exclusivo de cierta parte del documento, sin embargo a veces se quiere tener un estilo que se aplique en casos aun más específicos. Por ejemplo se desea que solo los tags <BLOCKQUOTE> dentro de tags <P> tengan texto de color rojo, o por ejemplo se desea que solo los tags <H3> de cierta clase dentro de tags <BLOCKQUOTE> tengan determinado color. Esto es posible usando un criterio de selección contextual en la definición de la hoja de estilo, por ejemplo.

La definición del estilo anterior indica que los tags <BLOCKQUOTE> usaran texto color rojo cuando estén dentro o anidados dentro de tags <P>.

El estilo se define usando los nombres de los tags separados por espacios, el criterio para la aplicación del estilo se le de derecha a izquierda, como en el ejemplo anterior el estilo se aplica a los tags <BLOCKQUOTE> que estén dentro de tags <P>, otro ejemplo seria.

En el ejemplo anterior se indica que se utilizara letra azul de tipo negrita en los tags <LI> de listas que estén dentro de tags <P> que a su vez estén dentro de tags <BLOCKQUOTE>.

También es posible definir un clase de criterio contextual, por ejemplo:

El estilo anterior indica que solo se aplicara el mismo a los tags <H1> que sean de la clase "miencabezado".

Para aplicar el estilo se tendría que escribir en el documento el tag <H1> de la siguiente forma:

<H1 class="miencabazado">Este es mi encabezado.</H1>

Un ejemplo mas complejo de las diversas formas de usar la selección contextual de estilos es:

<HTML> <HEAD> <TITLE>Otro ejemplo mas</TITLE> <STYLE> <!-- BODY{background-color:silver;} H1 H3 BLOCKQUOTE EM{color:purple; font-style:italic; font-weight:bold;} P H1.tu_estilo{color:maroon;} --> </STYLE> </HEAD> <BODY> <H1>Esta parte del documento esta usando el tag heading 1<H3>Ahora estamos usando el tag heading 3 . <BLOCKQUOTE>Ahora usamos una sangría<EM>Ahora usamos texto con énfasis al cual se le aplica un estilo contextual</EM>Volvemos al texto con sagria</BLOCKQUOTE>volvemos al texto heading3</H3> volvemos al texto de heading 1 </H1> <H1>Texto heading 1 sin un estilo contextual asignado</H1> <P><H1 class="tu_estilo">Este es tu estilo</H1></P> <EM>Texto con énfasis sin un estilo contextual aplicado. </EM> </BODY> </HTML>

Esta parte del documento esta usando el tag heading 1  Ahora estamos usando el tag heading 3 . Ahora usamos una sangría Ahora usamos texto con énfasis al cual se le aplica un estilo contextual, Volvemos al texto con sangría volvemos al texto heading3  volvemos al texto de heading 3  Texto heading 1 sin un estilo contextual asignado Este es tu estilo Texto con énfasis sin un estilo contextual aplicado.

Como se puede ver el estilo se aplica solo en los estilos cuyo contexto cumple con el criterio especificado.

10. Definición de estilos directamente o "al vuelo", el atributo "style".

Es posible definir un estilo directamente dentro de cierto tag, esto se hace cuando se desea definir un estilo sencillo o que no se va a usar en otro lado. Para definir estilos directamente se usa la palabra  "style"  como atributo dentro de casi todos los tags estándar del HTML, por ejemplo:

<H1 style="color:red; font-weight:bold;">Heading 1 color rojo y letra tipo negrita</H1>

Como se puede ver se usa el atributo style de la siguiente forma:

1. Se escribe el atributo dentro de cualquier tag que lo soporte.
2. Mediante un signo igual y comillas se asignan los diversos atributos del estilo.
3. Los atributos se escriben igual que como los hemos venido usando, es decir nombre del atributo, dos puntos, valor del atributo, punto y coma. Si se usan varios atributos se separan con espacio o se ponen en otro renglón.
4. Es necesario cerrar el tag en el cual se aplicó el estilo.

<P style="text-align:center; font-style:italic; font-weight:bold; color:purple;">Estilo definido directamente mediante el uso del atributo "style".</P>

El navegador interpretará los tags anteriores de la siguiente forma:

En general se recomienda definir un estilo en la hoja de estilo, solo en algunos casos es útil definir el estilo directamente.

11. Definición de una hoja de estilo en un archivo externo.

Es posible crear un hoja de estilo en un archivo externo y mediante un tag aplicarla a cierto documento, esta característica de las hojas de estilo ofrece muchas ventajas, ya que es posible que diversos documentos compartan la misma hoja de estilo.

Para definir en un archivo externo una hoja de estilo se usa el siguiente procedimiento.

1. Se crea un archivo de texto sin formato.
2. Se omite el tag <STYLE> y los símbolos de comentario <!-- -->, así como cualquier tag HTML
3. Se nombra el documento con cualquier nombre, se recomienda que el documento tenga la extensión "css" que es la característica de los archivos de hoja de estilo en cascada.

Como se puede ver la hoja de estilo no incluye ningún tag HTML, esta hoja de estilo es un hoja de estilo real que yo uso en este website, incluye muchos atributos que trataremos en el siguiente capítulo.

Para incluir esta hoja de estilo dentro del documento HTML, se usa el tag <LINK> en la cabeza del documento, junto con ciertos atributos de la siguiente manera:

El tag <LINK> tiene diversos usos, por lo que es importante definir que se esta usando para insertar un estilo, por eso siempre se debe usar el atributo "rel" con el valor "stylesheet" cuando se usa para insertar una hoja de estilo, el atributo type con el valor "text/css" (para el caso de las hojas de estilo CSS), y el atributo "href" que especificara la ubicación y nombre de la hoja de estilo.

Por ejemplo el siguiente documento HTML.

<HTML> <HEAD> <TITLE>Otro ejemplo</TITLE> <LINK rel="stylesheet" type="text/css" href="estilos/newstyle.css"> </HEAD> <BODY> Contenido del cuerpo del documento... </BODY> </HTML>

El documento anterior usaría la hoja de estilo de ejemplo de esta sección.

Es posible usar varias hojas de estilo externas e internas en un documento HTML, esto se hace de la siguiente forma.

<STYLE type="text/css" src="estilos/newstyle.css"></STYLE>

<STYLE type="text/css" src="estilos/mainstyle.css"></STYLE>

<STYLE type="text/css">

<!--

.nuestro_estilo{color:blue; text-aling:center;}

#mi_estilo{font-weight:bold; text-align:center; color:blue;}

-->

</STYLE>

Como se puede ver se pueden especificar archivos externos usando el atributo "src" (cuyo valor será el nombre y la ubicación de la hoja de estilo) dentro del tag <STYLE>, también se pueden crear una hoja de estilo dentro del documento. Cuando se usa una sola hoja de estilo se debe usar el tag <LINK>.

Lo que sucede al usar varias hojas de estilo es que las caracteristicas de las hojas de estilo pierden importancia de abajo hacia arriba, es decir la ultima definición de la hoja de estilo, sobreescribe las caracteristicas de las hojas que se insertan antes de ella.

12. Conclusión de este capítulo.

En esta parte hemos tratado los aspectos generales de las hojas de estilo, hemos manejado propiedades muy elementales con el fin de familiarizarnos primero con la sintaxis de las hojas de estilo y su aplicación. Si tiene dudas lea detenidamente cada sección, recuerde que puede enviarme un e-mail. Hasta ahora los ejemplos que hemos visto han sido sencillos y para presentarlos hemos usado emulación mediante los tags tradicionales de HTML, la segunda parte ya emplea las hojas de estilo, por lo que es recomendable usar un navegador de cuarta generación para que los ejemplos funcionen como por ejemplo Netscape Communicator 4.01 o posterior y Microsoft Internet Explorer 4.0 o posterior.