Tipos de hojas de estilo CSS en páginas web

Los estilos incrustados son los que se definen dentro del propio documento HTML, más concretamente dentro de su cabecera, utilizando para ello las etiquetas <style></style> y definiendo en su interior las declaraciones de estilos que van a aplicarse a los elementos definidos en el cuerpo del documento HTML. Esta opción suele utilizarse cuando se utilizan pocas declaraciones de estilos.

A continuación, se muestra un ejemplo de cómo se pueden definir los estilos incrustados en una página Web:

Los estilos enlazados son los que se aplican utilizando para ello hojas de estilo CSS externas en las que se realicen las declaraciones de los estilos que se van a aplicar a la página Web, para posteriormente enlazarla dentro del documento HTML de cada página Web mediante la etiqueta <link>. Las hojas de estilo externas que se definan tendrán que tener de forma obligatoria la extensión .css.

Además, existen tres tipos de hojas de estilo que se pueden enlazar mediante la etiqueta <link>, que son los siguientes:

Para que una hoja de estilos sea considerada como permanente y los estilos que se definan en su interior se apliquen a los elementos de la página Web, hay que definir dentro de la etiqueta <link> el atributo rel con el valor stylesheet asignado, y además hay que evitar el uso del atributo title, tal y como se muestra en el siguiente ejemplo:

Las hojas de estilo preferentes son las que se aplican cuando el usuario no ha elegido de forma explícita otra hoja de estilos alternativos que se debe aplicar a los elementos de la página Web. Es decir, al cargarse la página estarán aplicadas, pero pueden deshabilitarse si el usuario selecciona cambar a una hoja de estilo alternativa. Para definirlas hay que utilizar la etiqueta <link>, junto con la definición del atributo rel y su valor stylesheet, además de la definición del atributo title con un título identificativo para la hoja CSS. Podemos definir varias hojas preferentes, definiéndolas de la manera comentada, y se deshabilitarían o habilitarían todas ellas al mismo tiempo, como si fueran un grupo. Veamos un ejemplo de hoja preferente:

Por último, se encuentran las hojas de estilo alternativas, que son las que se aplican cuando los usuarios las seleccionan de forma explícita, y para definirlas hay que utilizar la etiqueta <link> junto con la definición del atributo rel y su valor alternate stylesheet, además de la definición del atributo title con un título identificativo para la hoja de estilos CSS, tal y como se muestra en el siguiente ejemplo:

Además, de incluir una hoja de estilos externa mediante la etiqueta <link>, también se puede utilizar la etiqueta <style> junto con la regla @import, seguido de la palabra url y la ruta de la hoja de estilos que queremos importar entre paréntesis y definida entre comillas simples o dobles. En caso de utilizar esta técnica, hay que definirla antes de realizar cualquier vínculo de otra hoja de estilos mediante la etiqueta <link>.

A continuación, se muestra un ejemplo de cómo se puede importar una hoja de estilos externa en una página Web:

Podemos poner, además, detrás de la URL indicada, cuál es el dispositivo al que queremos que se apliquen los estilos importados:

Como vemos, la importación de estilos se hará cuando la página Web sea impresa, o vista a través de un proyector o televisión.

Esta última técnica consiste en definir los estilos propios para cada elemento dentro de la declaración de cada etiqueta dentro del documento HTML, utilizando para ello el atributo style y estableciendo como valor para dicho atributo las propiedades y valores de los estilos que se quieran aplicar al elemento. Es la técnica menos recomendada puesto que al tener que definir los estilos mezclados dentro del propio documento HTML conseguimos que sea más difícil entender dicho código, además de una mala optimización de la Web.

A continuación, se muestra un ejemplo de cómo se pueden definir los estilos dentro de cada elemento de la página Web: