Entrar al aula
×

Tipos de hojas de estilo CSS en páginas web

A la hora de definir los estilos que se quieren aplicar a un sitio Web, se puede realizar de cuatro maneras diferentes, que explicaremos a continuación, aunque hay alguna más recomendada que otra, puesto que según la técnica que utilicemos podremos conseguir una mejor o peor optimización para el sitio Web. Dichos tipos de estilos existentes son los siguientes:

Incrustados

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.

Uno de los inconvenientes que tiene el uso de esta técnica es que en caso de quererse aplicar los mismos estilos a varios elementos en cada una de las páginas que forman el sitio Web, será necesario escribir los estilos en cada una de ellas, lo que puede generar una gran cantidad de código duplicado. Además, en caso de que se quiera hacer alguna modificación sobre los mismos, también será necesario realizar la modificación en cada una de las páginas Web.

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ejemplo de estilos incrustados</title>
    <style type="text/css">
        p {
            color: black;
            background-color: white;
            border: 1px solid blue;
            padding: 2px;
        }
    </style>
</head>
<body>
    <p>Contenido de la página Web</p>
</body>
</html>
Enlazados

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:

Permanentes

También conocidas como persistent, son las hojas de estilo que se aplican siempre.

Preferentes

También conocidas como preferred, son las hojas de estilo alternativas que se van a aplicar por defecto.

Alternativas

También conocidas como alternate, son las hojas de estilo alternativas que pueden ser seleccionadas por el usuario.

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:

<link rel="stylesheet" type="text/css" href="estilos1.css">
<link rel="stylesheet" type="text/css" href="estilos2.css">

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:

<link rel="stylesheet" title="Alternativos" type="text/css" href="estilos.css">

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:

<link rel="alternate stylesheet" title="Alternativos" type="text/css" href="estilos.css">
Para aplicar las hojas de estilo alternativas y preferentes, tenemos que utilizar los menús que nos proporcione el navegador, o bien las facilidades que nos proporcione alguna extensión o complemento del mismo. Otra forma de realizarlo es mediante algún enlace o lista desplegable que tenga asociado un código JavaScript Es un lenguaje de programación interpretado, lo que quiere decir que no se necesita de ningún compilador para ejecutar el programa, puesto que se puede ejecutar directamente en el navegador y que se utiliza para desarrollar páginas Web que sean dinámicas. Además, es un lenguaje orientado a eventos, lo que permite modificar el funcionamiento del código según las acciones de los usuarios. También es un lenguaje que está basado en objetos, y cuyo código se puede definir tanto en un fichero .html como en un fichero externo con extensión .js. que proporcione el cambio de aplicación de hojas de estilo. El navegador normalmente proporciona el cambio de hojas de estilo mediante el menú Ver y según el navegador, el submenú Estilo de página, Página de Estilo o Utilizar Hoja de Estilo.

  

Importados

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 Del inglés Uniform Resource Locator o Localizador de Recursos Uniforme es la manera de indentificar recursos de Internet más utilizada. Es un tipo de URI o identificador de recursos uniforme. Simplificando, es una dirección de un recurso de Internet, una cadena de caracteres con la cual se indica dónde está un recurso, de qué tipo de información hablamos, en qué servidor se encuentra. Tiene un formato estándar y tiene como propósito asignar una dirección única a cada uno de los recursos disponibles en Internet, como por ejemplo textos, imágenes, vídeos, etc. 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:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ejemplo de estilos importados</title>
    <style type="text/css">
        @import url("/estilos.css");
    </style>
</head>
<body>
    <p>Contenido de la página Web</p>
</body>
</html>
En el ejemplo, utilizamos una etiqueta <style>, siendo lo primero que utilizamos la regla @import. Si no se hiciera así, el resultado sería que no se importaría ningún estilo del fichero .css indicado. Así que si utilizamos @import conjuntamente con otras reglas de estilos en el elemento <style> siempre debemos colocarla al inicio del todo. Entre la etiqueta <style> e @import no puede haber ninguna otra regla. Si la hay, no se importa la hoja de estilos.

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

@import url("/estilos.css") print, projection, tv;

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.

El uso de esta técnica no es muy recomendable, ya que cuando se mezclan los métodos de acceder a las reglas de estilo de varios ficheros .css, utilizando la etiqueta <link> y también la etiqueta <style> donde incluyamos un @import, no todos los navegadores realizarán ambas acciones de forma correcta. También, un fichero .css pudiera contener importaciones de reglas mediante @import. En este último caso el orden de las importaciones no será muy correcto. Debido a que el uso de @import penaliza las descargas por regla general, se recomienda en su lugar siempre usar la etiqueta <link> para referenciar a ficheros externos de reglas de estilo.
En línea

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:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Estilos en el elemento HTML</title>
</head>
<body>
    <p style="background-color: white; color: black; padding: 1px;">Contenido de la página Web</p>
</body>
</html>
Actividad de autoevaluación: Técnicas para definir estilos