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 tres formas principales de añadir código CSS en un documento HTML: enlazando un archivo CSS externo mediante el elemento <link> (recomendado); 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.

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 definen 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 (favicons).

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.

CSS interno: 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.

En este caso, 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 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>

CSS en línea: 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>
← Artículo anterior
CSS: Introducción
Artículo siguiente →
CSS: Sintaxis