Curso HTML 13.1 Enlace de hojas de estilo (link rel=’stylesheet’)

Curso HTML 13.1: Enlace de hojas de estilo (<link rel=’stylesheet’>)

En este apartado profundizaremos en el uso del elemento <link> para enlazar hojas de estilo externas. Veremos sus atributos, variantes avanzadas (preload, alternate stylesheets, integridad), buenas prácticas de rendimiento y ejemplos comentados.

1. Concepto y posición recomendada

El elemento <link> con rel='stylesheet' indica al navegador que debe descargar y aplicar un archivo CSS.
Se coloca habitualmente en la sección <head> para evitar flash de contenido sin estilos (FOUC) y mejorar el orden de renderizado.
Formato mínimo:
```
    
```

2. Atributos principales

Atributo	Descripción	Valores	Requisito
rel	Relación del recurso con el documento	`stylesheet` `alternate stylesheet` `preload`	Obligatorio
href	URL del archivo CSS (relativo, absoluto o CDN)	Ruta o URL	Obligatorio
type	Tipo de contenido MIME	`text/css` (por defecto)	Opcional
media	Dispositivo o contexto en el que se aplica	`all` `screen` `print` etc.	Opcional
title	Nombre de la hoja de estilo (para alternates)	Texto descriptivo	Opcional
integrity	Hash de subrecurso para verificación (SRI)	Algoritmo+hash (`sha384-...`)	Opcional
crossorigin	Política CORS	`anonymous` `use-credentials`	Opcional

3. Ejemplos y variantes

3.1. Enlace básico con tipo y media específica:

3.2. Uso de CDN con Subresource Integrity:

3.3. Alternate Stylesheets (temas intercambiables):

Con JavaScript se puede activar/desactivar según link.disabled o buscando por [rel*='stylesheet'][title].

3.4. Preload para priorizar carga de CSS y mejorar rendimiento:

4. Orden y carga de hojas de estilo

Las hojas de estilo se aplican en orden de aparición. La última regla válida gana (Cascade).
Evita múltiples @import dentro de CSS: incrementan la latencia.
Usa <link> en <head> para paralelizar descargas.
Preconnect/dns-prefetch para dominios de terceros mejora el TTFB:

5. Buenas prácticas y recomendaciones

Agrupa y minimiza archivos CSS para reducir número de peticiones HTTP.
Aplica políticas de cache (Cache-Control) en el servidor para archivos estáticos.
Valida hashes SRI al usar CDNs y actualízalos al cambiar versión.
Evita bloqueos de renderizado innecesarios: carga solo lo crítico y difiere el resto.
Si usas media='print' u otros medios, recuerda su orden en cascade.
Usa alternate stylesheet con cuidado: no todos los navegadores lo soportan de forma exponencial.
Comprende especificidad y no abuses de !important, ya que rompe la cascada.

6. Resumen

El elemento <link rel='stylesheet'> es la base para aplicar estilos externos en HTML. Dominando sus atributos y variantes (preload, integridad, media queries, alternates), podrás optimizar la carga, brindar temas intercambiables y garantizar seguridad e integridad en tu proyecto web.

Curso HTML 13.1 Enlace de hojas de estilo (link rel=’stylesheet’)