Cómo enlazar CSS a HTML: link, style, @import y cómo corregir rutas
Enlaza una hoja de estilos con el elemento link, o usa style, estilos en línea o @import. Prueba rutas relativas y absolutas en vivo y sigue una lista de comprobación cuando el CSS no carga.
Cómo enlazar CSS a HTML
Para enlazar un archivo CSS a una página HTML, pon <link rel="stylesheet" href="styles.css"> dentro del head. El href es una ruta desde el archivo HTML hasta el archivo CSS, así que un archivo dentro de una carpeta css necesita href="css/styles.css". También puedes escribir CSS en un elemento style, en un atributo style, o incluir archivos con @import.
Cuatro formas de añadir CSS a una página
Método
Dónde va
Ideal para
<link rel="stylesheet">
En el head
Casi todo: un archivo compartido por muchas páginas
Elemento <style>
En el head
Páginas pequeñas, CSS crítico, demos
Atributo style="..."
En un elemento
Valores puntuales establecidos desde el código
@import url(...)
Al principio de un archivo CSS
Dividir el CSS en capas o archivos
Casi todos los casos de una página sin estilos se reducen a la ruta o a los atributos del elemento link. Esta guía muestra cada forma de añadir CSS, incluye un comprobador de rutas que calcula exactamente a qué URL apunta tu href, y termina con una lista de comprobación para cuando los estilos siguen sin aparecer.
Escribe la dirección de tu página HTML, tal como aparece en la barra del navegador.
Escribe el href que usaste en el elemento link.
El comprobador muestra la URL completa que pedirá el navegador, calculada en tu navegador con las reglas estándar de URL.
Abre esa URL en una pestaña nueva. Si no muestra tu CSS, la ruta está mal.
El atributo type="text/css" es opcional. CSS es el único lenguaje de hojas de estilo que usan los navegadores.
Pon los enlaces a hojas de estilo en el head. Los enlaces en el body están permitidos, pero pueden causar un destello de contenido sin estilo.
Añade un atributo media como media="print" para aplicar una hoja de estilos solo cuando se cumpla esa condición.
El orden importa. Cuando dos reglas tienen la misma especificidad, gana la que se carga después, así que enlaza tu propio CSS después de cualquier framework.
Preguntas frecuentes
¿Por qué mi archivo CSS no se enlaza con mi HTML?
Revisa primero la ruta: abre las herramientas de desarrollo del navegador, mira la pestaña Network y busca la petición del CSS. Un 404 significa que el href apunta al sitio equivocado. Comprueba también que rel="stylesheet" está bien escrito, que los nombres de archivo coinciden en mayúsculas y minúsculas y que guardaste el archivo.
¿Qué diferencia hay entre una ruta relativa y una absoluta?
Una ruta relativa como css/site.css se resuelve desde la carpeta de la página actual. Una ruta que empieza por / se resuelve desde la raíz del sitio, y una URL completa que empieza por https:// apunta a una dirección exacta. Las rutas desde la raíz no funcionan cuando abres el archivo directamente desde el disco.
¿Debo usar @import o link?
Mejor link. Cada @import solo se descubre después de que se haya descargado el archivo que lo contiene, así que los imports encadenados cargan uno tras otro. @import es útil para ordenar con layer() o dentro de una herramienta de build que de todos modos empaqueta los archivos.
¿Cómo subo una carpeta en el href?
Usa ../ por cada nivel. Una página en /blog/post.html con el CSS en /css/site.css usa href="../css/site.css", o la ruta desde la raíz href="/css/site.css" cuando el sitio funciona en un servidor.
¿Dónde debe ir @import?
Al principio de la hoja de estilos, antes de cualquier otra regla. Solo las sentencias @charset y @layer pueden ir antes. Un @import colocado después de reglas de estilo se ignora.
Cómo resuelve el navegador un href
El navegador parte de la URL de la propia página, quita el nombre del archivo y aplica el href a la carpeta que queda. ../ sube una carpeta, ./ se queda en la misma, y una barra inicial vuelve a empezar desde la raíz del sitio.
Cuando abres una página con doble clic, la raíz es tu disco, no tu proyecto. Por eso /css/site.css funciona en un servidor pero falla desde una dirección file://, mientras que una ruta relativa funciona en ambos casos.
Estilos en línea y elementos style
Un elemento style mantiene el CSS dentro de la página, lo que ahorra una petición y es práctico para el pequeño bloque de CSS crítico que da estilo a la primera pantalla. No se puede guardar en caché por separado y se repite en cada página.
Un atributo style se aplica a un elemento y gana a las reglas de las hojas de estilo salvo que usen !important. Úsalo para valores que calcula tu código, no para el diseño habitual, que se vuelve imposible de cambiar en todo el sitio.
El elemento link
Una página con una hoja de estilos enlazada
El link está en el head. Su href es relativo a este archivo HTML, así que styles.css debe estar en una carpeta css junto a él.
El elemento style y los estilos en línea
CSS incrustado y en línea a la vez
El elemento style colorea todos los p. El atributo style del segundo párrafo gana solo para ese elemento.
@import dentro de una hoja de estilos
Los imports van primero. Pueden llevar una media query, una condición supports() o una capa de cascada.
¿El CSS no carga? Recorre esta lista
Por qué no se aplican los estilos y cómo comprobarlo
Síntoma
Causa probable
Solución
404 del CSS en la pestaña Network
Ruta o carpeta incorrecta
Usa el comprobador de rutas de arriba; prueba una ruta desde la raíz en un servidor
Ninguna petición del CSS
Error en rel o link fuera del HTML
Escribe rel="stylesheet" exactamente; pon el link en el head
Funciona en local, falla en línea
Las mayúsculas y minúsculas del nombre de archivo no coinciden
Siguen apareciendo estilos antiguos
Caché del navegador
Recarga forzada, o añade una versión como styles.css?v=2
Algunas reglas se ignoran
Las sobrescriben reglas posteriores o más específicas
Inspecciona el elemento; revisa el orden y la especificidad
@import no hace nada
Va después de otras reglas
Mueve cada @import al principio del archivo
Bloqueado en la consola
Se sirve con un content type incorrecto
El servidor debe enviar text/css para los archivos .css
Comprobador de rutas
Dirección de tu página HTML
href de tu elemento link
El navegador pide:
Esa dirección de página no es una URL completa. Empiézala por https:// o file:///
Esto es un archivo de tu disco. Las rutas que empiezan por / apuntan a la raíz de la unidad, no a tu proyecto.