Hay muchas maneras de enlazar hojas de estilo a HTML, cada una con sus ventajas y desventajas. Se han introducido nuevos elementos y atributos HTML para permitir la fácil incorporación de hojas de estilo en documentos HTML.
Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML:
La etiqueta <LINK> se coloca en la cabecera HEAD del documento. El atributo opcional TYPE se usa para especificar un tipo de medio --text/css para una hoja de estilo en cascada-- permitiéndole a los navegadores omitir los tipos de hoja de estilo que no soportan. También es una buena idea configurar el servidor para enviar text/css como Content-type para archivos CSS.
Las hoja de estilo externas no debrían contener ninguna etiqueta HTML como <HEAD> o <STYLE>. La hoja de estilo solo debería consistir simplemente de reglas de estilo o sentencias. Un archivo que solo consista de
P { margin: 2em }
podría usarse como una hoja de estilo externa.
La etiqueta <LINK> también toma un atributo opcional MEDIA, que especifica el medio o medios en que debería aplicarse la hoja de estilo. Los valores posibles son
Medios múltiples se especifican mediante una lista separada por comas, o por el valor all.
Netscape Navigator 4.x ignora incorrectamente cualquier hoja de estilo enlazada o incrustada declarada con valores MEDIA diferentes de screen. Por ejemplo, MEDIA="screen, projection" provocará que la hoja de estilo sea ignorada por Navigator 4.x, aun si el dispositivo de presentación es una pantalla de computadora. Navigator 4.x también ignora hojas de estilo declaradas con MEDIA=all.
El atributo REL se usa para definir la relación entre el archivo enlazado y el documento HTML. REL=StyleSheet especifica un estilo persistente o preferido mientras que REL="Alternate StyleSheet" define un estilo alterno. Un estilo persistente es aquel que siempre se aplica si están activas las hojas de estilo. La ausencia del atributo TITLE, como en la primera etiqueta <LINK> en el ejemplo, define un estilo persistente.
Un estilo preferido es uno que se aplica automáticamente, como en la segunda etiqueta <LINK> en el ejemplo. La combinación de REL=StyleSheet y un atributo TITLE especifica un estilo preferido. Los autores no pueden especificar más de un estilo preferido.
Un estilo alterno se indica por REL="Alternate StyleSheet". La tercera etiqueta <LINK> en el ejemplo define un estilo alterno, que el usuario podría elegir para reemplazar la hoja de estilo preferido.
Note que los navegadores actuales generalmente carecen de la capacidad de elegir estilos alternos.
Un estilo simple también puede ser dado mediante múltiples hojas de estilo:
<LINK REL=StyleSheet HREF="basico.css" TITLE="Contemporaneo">
<LINK REL=StyleSheet HREF="tablas.css" TITLE="Contemporaneo">
<LINK REL=StyleSheet HREF="formas.css" TITLE="Contemporaneo">
En este ejemplo, tres hojas de esilo son combinadas en un estilo "Contemporaneo" que se aplica como una hoja de estilo preferido. Para combinar múltiples hojas de estilo en un estilo único, se debe usar el mismo TITLE con cada hoja de estilo.
Una hoja de estilo externa es ideal cuando el estilo se aplica a muchas páginas. Con una hoja de estilo externo, un autor podría cambiar la apariencia de un sitio completo mediante el cambio de un solo archivo. Además, la mayoría de navegadores guardan en caché las hojas de estilo externas, evitando así una demora en la presentación una vez que la hoja de estilo se ha guardado en caché.
Microsoft Internet Explorer 3 para Windows 95/NT4 no soporta imágenes o colores de fondo (background) en BODY desde hojas de estilo enlazadas. Con este defecto, los autores podrían querer tener otro mecanismo para incluir una imagen o color de fondo, como incrustando o usando el estilo en línea, o usando el atributo BACKGROUND del elemento BODY.
Una hoja de estilo puede incrustarse en un documento con el elemento STYLE:
<STYLE TYPE="text/css" MEDIA=screen><!-- BODY { background: url(foo.gif) red; color: black } P EM { background: yellow; color: black } .nota { margin-left: 5em; margin-right: 5em } --></STYLE>
La etiqueta <STYLE> se coloca en la cabecera HEAD del documento. El atributo requerido TYPE se usa para especificar un tipo de medio, así como su función con el elemento LINK. En forma similar, los atributos TITLE y MEDIA también pueden especificarse con STYLE.
Los navegadores más antiguos, que ignoran el elemento STYLE normalmente mostrarían su contenido como si fuera parte de BODY, haciendo así visible la hoja de estilo para el usuario. Para evitarlo, el contenido del elemento STYLE está contenido dentro de un comentario SGML (<!-- comentario -->), como en el ejemplo precedente.de arriba.
Debería usarse una hoja de estilo incrustada cuando un único documento tiene un único estilo. Si la misma hoja de estilo se usa en múltiples documentos, entonces sería más apropiada una hoja de estilo externa.
Una hoja de estilo puede ser importada con la sentencia @import de CSS. Esta sentencia puede usarse en un archivo CSS o dentro del elemento STYLE:
<STYLE TYPE="text/css" MEDIA="screen, projection"><!-- @import url(http://www.htmlhelp.com/estilo.css); @import url(/stylesheets/punk.css); DT { background: yellow; color: black } --></STYLE>
Note que otras reglas de CSS pueden aún estar incluidas en el elemento STYLE, pero todas las sentencias @import deben ocurrir al inicio de la hoja de estilo. Cualquier regla especificada en la misma hoja de estilo prevalecerá sobre reglas contradictorias en las hojas de estilo importadas. Por ejemplo, inclusive si una de las hojas de estilo importadas contuviera DT { background: aqua}, los términos de definición aún tendrían un fondo amarillo.
El orden en el que las hojas de estilo son importadas es importante para determinar como trabajan en cascada. En el ejemplo de arriba, si la hoja de estilo importada estilo.css especifica que los elementos STRONG se muestren en rojo y la hoja de estilo punk.css especifica que los elementos STRONG se muestren en amarillo, la última regla prevalecería, y los elementos STRONG serían amarillos.
Las hojas de estilo importadas son útiles para fines de modularidad. Por ejemplo, un sitio puede separar diferentes hojas de estilo por los selectores usados. Puede haber una hoja de estilo simple.css que dé las reglas para elementos comunes como BODY, P, H1y H2. Además, puede haber una hoja de estilo extra.css que de reglas para los elementos menos comnes como CODE, BLOCKQUOTE y DFN. Una hoja de estilo tablas.css puede usarse para definir reglas para elementos tabla. Estas tres hojas de estilo podrían ser incluidas en documentos HTML con la sentencia @import. Las tres hojas de estilo también podrían ser combinadas mediante el elemento LINK.
Puede usarse estilos en línea mediante el atributo STYLE. El atributo STYLE puede ser aplicado a cualquier elemento BODY (incluyendo el mismo BODY) excepto para BASEFONT, PARAM y SCRIPT. El atributo toma como su valor, cualquier número de declaraciones CSS, donde cada declaración está separada por un punto y coma. Ejemplo:
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif">Este párrafo usa estilos en rojo con la fuente New Century Schoolbook, si está disponible.</P>
Note que New Century Schoolbook está en comillas simples en el atributo STYLE, ya que las comillas dobles se usan para contener las declaraciones de estilo.
El estilo en línea es mucho más inflexible que los otros métodos. Para suar estilo en línea, se debe declarar un único lenguaje de hojas de estilo para el documento completo usando la extensión de cabecera HTTP Content-Style-Type. Con CSS en línea, un autor debe enviar text/css como la cabecera HTTP Content-Style-Type o incluir la siguiente etiqueta en la cabecera HEAD:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
Los estilos en línea pierden muchas de las ventajas de las hojas de estilo al mezclar contenido con presentación. Así mismo, los estilos en línea se aplican implícitamente a todos los medios, ya que no hay un mecanismo para especificar el medio deseado para un estilo en línea. Este método debería usarse con moderación, como cuando se aplica un estilo en todos los medios para una sola ocurrencia de un elemento. Si el estilo debe aplicarse a un único elemento pero solo con cierto medio, use el atributo ID en lugar del atributo STYLE.
El atributo CLASS se usa para especificar la clase de estilo a la cual pertenece el elemento. Por ejemplo, la hoja de estilo puede haber creado las clases punk y advertencia:
.punk { color: lime; background: #ff80c0 }
P.advertencia { font-weight: bolder; color: red; background: white }Se podría hacer referencia a estas clases en HTML con el atributo CLASS:
<H1 CLASS=punk>Extensiones proprietarias</H1>
<P CLASS=advertencia>Muchas extensiones proprietarias pueden tener efectos laterales negativos, tanto en los navegadores que las soportan como en los que no lo hacen...
En este ejemplo, la clase punk puede aplicarse a cualquier elemento BODY ya que no tiene un elemento HTML asociado con ella en la hoja de estilo. Al usar la hoja de estilo del ejemplo, la clase advertencia solo puede aplicarse al elemento P.
Una buena práctica es llamar a las clases de acuerdo a su función y no por su apariencia. La clase advertencia de ejemplo anterior, podría haberse llamado red (rojo), pero este nombre perdería significación si el autor decidiera cambiar el estilo de la clase aun color diferente, o si el autor quisiera definir un estilo aural para quienes usan sintetizadores de voz.
Las clases pueden ser un método muy eficaz para aplicar diferentes estilos a secciones estructuralmente idénticas de un documento HTML. Por ejemplo, esta página usa clases para dar un estilo diferente al código CSS y al código HTML.
El atributo ID se usa para definir un estilo único para un elemento. Una regla CSS como
#wdg97 { font-size: larger }
puede aplicarse en HTML mediante el atributo ID:
<P ID=wdg97>¡Bienvenido al Web Design Group!</P>
Cada atributo ID debe tener un valor único a través del documento. El valor debe ser una letra inicial seguida por letras, dígitos o guiones. Las letras solo pueden ser A-Z y a-z.
Note que HTML 4.0 permite puntos en valores del atributo ID, pero CSS1 no permite puntos en selectores ID. Note también que CSS1 permite los caracteres Unicode 161-255 así como los caracteres de escape Unicode como códigos numéricos, pero HTML 4.0 no permite estos caracteres en el valor de atributo ID.
El uso de ID es apropiado cuando una hoja de estilo solo necesita ser aplicada una vez en algún documento. ID contrasta con el atributo STYLE en que el primero permite estilos específicos al medio y también puede aplicarse a múltiples documentos (aunque sólo uno en cada documento).
El elemento SPAN fue introducido en HTML para permitir a los autores dar un estilo que no pudiera estar conectado a un elemento estructural HTML. SPAN puede usarse como un selector en una hoja de estilo, y también acepta los atributos STYLE, CLASS e ID.
SPAN es un elemento en línea, así que puede usarse simplemente como un elemento, tal como EM y STRONG en HTML. La gran diferencia es que mientras EM y STRONG conllevan significado estructural, SPAN no tiene tal significado. Existe solamente para aplicar estilos, y por lo tanto, no tiene efecto cuando la hoja de estilo está desactivada.
Algunos ejemplos de SPAN:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Ejemplo de SPAN</TITLE> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <STYLE TYPE="text/css" MEDIA="screen, print, projection"><!-- .primeraspalabras { font-variant: small-caps } --></STYLE> </HEAD> <BODY> <P><SPAN CLASS=primeraspalabras>Las primeras palabras</SPAN> de un párrafo podrían estar en small-caps. El estilo también puede estar en línea, como para cambiar el estilo de una palabra como <SPAN STYLE="font-family: Arial"> Arial</SPAN>.</P>
El elemento DIV es similar al elemento SPAN en función, con la gran diferencia que DIV (abreviatura para "división") es un elemento de nivel bloque. DIV puede contener párrafos, encabezados, tablas, y aun otras divisiones. Esto hace ideal a DIV para hacer diferentes clases de contenedores, como capítulo, resumen o nota. Por ejemplo:
<DIV CLASS=nota>
<H1>Divisiones</H1>
<P>El elemento DIV está definido en HTML 3.2, pero solo el atributo ALIGN está permitido en HTML 3.2. HTML 4.0 agrega los atributos CLASS, STYLE e ID , entre otros.</P>
<P>Ya que DIV puede contener otros contenedores de nivel bloque, es útil para hacer grandes secciones de un documento, como esta nota.</P>
<P>Requiere la etiqueta de cierre.</P>
</DIV>
Pocos documentos con estilos CSS se validarán en el nivel HTML 3.2 (Wilbur). HTML 3.2 no define el elemento SPAN, ni los atributos CLASS, STYLE o ID, y también carece de soporte para los atributos TYPE y MEDIA en los elementos LINK y STYLE.
Estos elementos relacionados con estilos no son negativos para navegadores que no los soportan, ya que son ignorados en forma segura. Los documentos que usen estos elementos y atributos pueden validarse contra HTML 4.0.
Mantenido por John Pozadzides y Liam Quinn
ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS
Copyright © 1997-98 John Pozadzides y Liam Quinn. Todos los derechos reservados.