Incrustar o importar una hoja de estilo

Incrustando una hoja de estilo

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 –>).

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.

Importación de una hoja de estilo

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.yanez.pro/estilo.css);
  @import url(/stylesheets/climb.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¬†climb.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 comunes 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.