Para que una hoja de estilo pueda influir en la presentación, el AU debe saber que existe. La especificación HTML define la forma de enlazar el HTML con las hojas de estilo. Esta sección es por tanto informativa, pero no normativa:
<HTML>
<HEAD>
<TITLE>Título</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://estilo.com/chevere" TITLE="Chévere">
<STYLE TYPE="text/css">
@import url(http://estilo.com/basico);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>El título es azul</H1>
<P STYLE="color: green">Mientras que el párrafo es verde.
</BODY>
</HTML>
Este ejemplo muestra cuatro formas de combinar estilos con HTML: usando el elemento 'LINK' para enlazar una hoja de estilo externa, un elemento 'STYLE' dentro del elemento 'HEAD', una hoja de estilo importada usando la notación CSS '@import', y un atributo 'STYLE' de un elemento contenido en el elemento 'BODY'. Esta última opción mezcla estilo con contenido y carece de las ventajas correspondientes de las hojas de estilo tradicionales.
El elemento 'LINK' hace referencia a hojas de estilo alternativas que el usuario puede seleccionar, mientras que las hojas de estilo importadas se mezclan automáticamente con el resto de la hoja de estilo.
Tradicionalmente, los AAUU no tienen en cuenta las etiquetas desconocidas. Como consecuencia de ello, los AAUU antiguos no tendrán en cuenta el elemento 'STYLE', pero su contenido será tratado como parte del elemento 'BODY', y mostrado como tal. Durante una fase de transición, el contenido del elemento 'STYLE' puede ocultarse utilizando comentarios SGML:
<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
Como el elemento 'STYLE' está declarado como "CDATA" en el DTD (tal y como se define en [2]), los intérpretes conformes con SGML no considerarán la hoja de estilo del ejemplo como un comentario que no deba tenerse en cuenta.
Para reducir el tamaño de las hojas de estilo, se pueden agrupar selectores en listas separándolos con una coma:
H1, H2, H3 { font-family: helvetica }
Análogamente, las declaraciones también pueden agruparse:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
Además, algunas propiedades tienen su propia sintaxis de agrupamiento:
H1 { font: bold 12pt/14pt helvetica }
Que es equivalente al ejemplo previo.