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.