CSS: Inclusión

Para empezar a trabajar con CSS es importante conocer los métodos que existen para incluir estilos CSS en un documento HTML. El hecho de que existan varios caminos ya es un indicativo de la flexibilidad de este lenguaje; pero también conviene conocer las ventajas y desventajas de cada método.

Estas son las formas principales para añadir código CSS en un documento HTML: enlazando un archivo CSS externo mediante el elemento <link> (recomendado); importando el archivo CSS externo con la regla arroba @import; añadiendo el código dentro del elemento <style>; y usando el atributo style para incrustar el código sobre un elemento HTML específico. En resumen:

CSS externo:

CSS interno:

Enlazar un archivo CSS externo es la forma más recomendada de incluir estilos en cascada en un documento HTML. Este método tiene la ventaja de unificar todos los estilos de un sitio web en un documento específico, simplificando mucho el mantenimiento y mejora del desarrollo web.

En este caso, los estilos se vinculan mediante el elemento <link>. Se trata de un elemento que sólo tiene etiqueta de apertura, por lo que se configura mediante atributos. Este elemento debe ser descendiente del elemento <head>, usado para definir la sección de cabecera de un documento HTML.

Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.

De hecho, mediante el elemento <link> puede incluirse mucha información relacionada con el diseño de la página web, como puede ser el caso de la carga de tipografías alternativas o la inclusión de iconos (faviconos).

Dado que el elemento <link> puede enlazar varios tipos de recursos, se usa el atributo rel para indicar el tipo de recurso enlazado. En el caso de los archivos CSS debe usarse el valor stylesheet. Como es de esperar, los archivos de estilos en cascada deben tener el formato CSS (extensión .css).

Ejemplo de código HTML de uso del elemento <link>:

<head>
  <link rel='stylesheet' href='estilos.css'>
</head>

Tal y como se puede apreciar en el ejemplo anterior, el atributo rel no es el único que se necesita para configurar correctamente el elemento <link>. El atributo href permite definir una ruta válida del archivo enlazado.

Tabla de atributos para enlazar un archivo CSS:

Atributo Descripción
rel Indica el tipo de recurso enlazado, que para hojas de estilo en cascada (CSS) debe ser stylesheet.
href Indica una dirección URL válida del recurso enlazado; puede ser relativa o absoluta.
media Indica una lista de los tipos de medio (media queries) para los cuales el recurso ha sido diseñado. Por defecto: all (todos). Otros valores pueden ser: print (impresora), screen (pantallas) o speech (sintetizadores de voz).
type El tipo de medio (Mime Type) que se enlaza. En este caso su valor será text/css.

El atributo type="text/css" ya no es necesario en HTML5. En ocasiones se indica para mantener cierta compatibilidad con navegadores muy antiguos, pero se puede omitir tranquilamente.

Importación: la regla arroba ‘@import’

Con la regla arroba («at-rule») @import también se puede enlazar un archivo CSS externo. Pero en este caso, no se enlaza desde dentro del documento HTML sino que se importa desde dentro de otro archivo CSS. Su uso es fácil: se indica como parámetro la dirección URL válida del archivo CSS deseado.

@import "archivo.css";

Es importante indicar que las declaraciones @import deben figurar arriba del todo del documento CSS, pero siempre justo después de @charset, en caso de existir. Además, esta regla arroba no se puede anidar dentro de otras.

Esta regla arroba también permite indicar un listado de consultas de medios (media queries) a los que hay que aplicar el archivo CSS importado. Así se puede aplicar estilos a un dispositivo determinado o según ciertas características técnicas, como la resolución de pantalla o el ancho del viewport del navegador web.

Si no se especifica ninguna consulta de medios, la importación se aplicará a todos. Por tanto, será como si se estuviera indicando all (todos).

Por ejemplo:

@import "imprimir.css" print;

En este ejemplo, los estilos del archivo imprimir.css solo se importarán cuando se ejecute la acción de imprimir el documento HTML.

Otro ejemplo:

@import "estilos.css" screen and (max-width: 768px);

En este caso, los estilos del archivo estilos.css solo se importarán cuando el ancho del _viewport_sea inferior a los 768 píxeles.

Dentro del archivo HTML: elemento <style>

Otra forma de incluir código CSS en un documento HTML es mediante el elemento <style>. En este caso, no es obligatorio que se encuentre como descendiente del elemento <head>, aunque es habitual encontrarlo en dicha posición. Puede ubicarse en cualquier lugar tantas veces como sea necesario.

Con este método, los estilos se aplicarán cuando el documento se haya cargado. Como ventaja respecto al enlazado de un archivo de CSS externo, es que el uso del elemento <style> evita una petición HTTP, lo que mejora la velocidad de carga de la web. Su desventaja es que dificulta mucho el mantenimiento.

El código CSS debe encontrarse entre las dos etiquetas de este elemento: <style> (de apertura) y </style> (de cierre). Este método puede ser útil en casos puntuales, pero es importante recordar que este código no se podrá reutilizar en otros documentos HTML. Por eso se recomienda el CSS externo.

Ejemplo de código HTML de uso del elemento <style>:

<style>
  .selector {
    color: red;
  }
</style>

Sobre un elemento HTML: atributo ‘style’

Mediante el atributo style es posible insertar código CSS sobre un elemento HTML. Este atributo forma parte de los atributos globales del HTML, por lo que puede ser usado sobre cualquier elemento. Sin embargo, su uso pierde la capacidad de aplicarse en cascada y dificulta mucho el mantenimiento.

Su utilidad está pensada para incluir estilos CSS en casos muy puntuales. Por ejemplo, en este curso nos sirve para mostrar ejemplos reales de aplicación de estilos sin que eso afecte al código CSS de Recursivos.

Ejemplo de código HTML insertando CSS en línea:

<p style="color: red">Párrafo de color rojo.</p>

Resultado:

Párrafo de color rojo.

← Artículo anterior
Artículo siguiente →