Docs ejecutables de CSS: CSS externo

Q: ¿Qué es el CSS externo?

Es una hoja de estilo guardada en su propio archivo .css y cargada con en el de la página. Todas las páginas que vinculan el archivo reciben los mismos estilos, y el navegador guarda el archivo en caché entre páginas.

Q: ¿Cómo vinculo un archivo CSS con HTML?

Agrega dentro de . El href es una ruta relativa al archivo HTML, así que css/styles.css apunta a una carpeta css junto a él, y /styles.css empieza desde la raíz del sitio.

Q: ¿Por qué no funciona mi CSS externo?

Las causas habituales son una ruta href incorrecta (busca un 404 en la pestaña Network), un rel="stylesheet" que falta, etiquetas escritas dentro del archivo .css o una regla posterior que sobrescribe la tuya. Una recarga forzada descarta una copia vieja en caché.

CSS externo en una línea

El CSS externo es un archivo .css aparte. Lo vinculas desde el <head> de cada página que lo necesita:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

El archivo contiene reglas CSS simples, sin etiquetas HTML alrededor:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

La vista previa de abajo no tiene un segundo archivo que cargar, así que pone el mismo CSS en un elemento <style>. Eso es CSS interno, y se ve exactamente igual que el archivo vinculado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

CSS interno: el elemento style

El CSS interno (también llamado CSS incrustado) es un elemento <style> dentro de la página. Ponlo en el <head> para que los estilos se conozcan antes de que se renderice el body. Se aplica a toda la página, y sus reglas usan selectores, algo que los atributos style en línea no pueden hacer.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

Pasa el mouse por una etiqueta: :hover funciona aquí porque es una regla real. La tercera forma, el atributo style, se explica en la página de CSS en línea.

CSS interno vs externo

	Externo (`<link>`)	Interno (`<style>`)
Dónde	Un archivo `.css`	Dentro de la página HTML
Alcance	Todas las páginas que lo vinculan	Una página
Caché	Se descarga una vez y se reutiliza entre páginas	Se envía de nuevo con cada página
Cambiar el aspecto del sitio	Cambias un archivo	Cambias todas las páginas
Petición extra	Sí, una por archivo	No
Sirve para	Sitios web reales	Demos, páginas únicas, email HTML, CSS crítico

La especificidad es la misma en ambos: una regla en un elemento <style> y la misma regla en un archivo vinculado pesan exactamente igual. Cuando empatan, gana la que aparece después en el documento.

Orden: gana la hoja de estilo posterior

Las hojas de estilo se leen en el orden del documento, tanto <link> como <style>. Entre dos reglas con la misma especificidad, gana la posterior. Los dos bloques <style> de abajo representan un archivo vinculado seguido de una sobrescritura a nivel de página:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

El botón conserva el padding y el texto blanco de la primera regla y toma solo el fondo de la segunda. Por eso la hoja de estilo propia de un sitio va después de la de un framework: primero haces <link> a la librería y luego a la tuya.

Rutas de archivo en href

El href de un <link> es una URL que se resuelve a partir de la ubicación del archivo HTML.

href	Carga
`styles.css`	Un archivo en la misma carpeta que la página
`css/styles.css`	Una carpeta `css` junto a la página
`../styles.css`	Una carpeta más arriba
`/styles.css`	Desde la raíz del sitio
`https://example.com/a.css`	Una URL completa en otro servidor

En un sitio cuyas páginas están a distintas profundidades, la forma relativa a la raíz (/css/styles.css) mantiene una sola ruta que funciona en todas las páginas.

Hojas de estilo para impresión y otros medios

Un atributo media limita una hoja de estilo a las condiciones que coinciden. Tanto <link> como <style> lo aceptan:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

La vista previa es una pantalla, así que el banner se muestra. En una página real, el banner desaparece de la versión impresa, y en DevTools puedes ver lo mismo emulando el tipo de medio print (panel Rendering).

Errores comunes

Ruta incorrecta. Un error de escritura en href no carga nada, y la página se muestra sin estilos. Abre DevTools, pestaña Network, y busca un 404 en el archivo .css.
Olvidar rel="stylesheet". Sin él, <link href="styles.css"> no carga una hoja de estilo.
HTML dentro del archivo .css. Un archivo .css solo contiene reglas. Las etiquetas <style> dentro de él no son CSS válido y rompen la regla que está junto a ellas.
Poner tu hoja de estilo antes que la del framework. Con la misma especificidad gana el archivo posterior, así que vincula tu propio CSS al final.
Ver una versión vieja. Los navegadores guardan las hojas de estilo en caché. Haz una recarga forzada o agrega una versión a la URL (styles.css?v=2) cuando publiques un cambio.

Preguntas frecuentes

¿Qué es el CSS externo?

Es una hoja de estilo guardada en su propio archivo .css y cargada con <link rel="stylesheet" href="styles.css"> en el <head> de la página. Todas las páginas que vinculan el archivo reciben los mismos estilos, y el navegador guarda el archivo en caché entre páginas.

¿Qué es el CSS interno?

El CSS interno, también llamado CSS incrustado, es CSS escrito dentro de un elemento <style> en el propio documento HTML, normalmente en el <head>. Se aplica solo a esa página.

¿Cómo vinculo un archivo CSS con HTML?

Agrega <link rel="stylesheet" href="styles.css"> dentro de <head>. El href es una ruta relativa al archivo HTML, así que css/styles.css apunta a una carpeta css junto a él, y /styles.css empieza desde la raíz del sitio.

¿Qué es mejor, CSS interno o externo?

CSS externo para cualquier sitio con más de una página: un solo archivo que editar, y los navegadores lo descargan una vez y lo reutilizan. El CSS interno sirve para una sola página, una demo o un bloque pequeño de estilos críticos que quieres en la primera respuesta.

¿Por qué no funciona mi CSS externo?

Las causas habituales son una ruta href incorrecta (busca un 404 en la pestaña Network), un rel="stylesheet" que falta, etiquetas <style> escritas dentro del archivo .css o una regla posterior que sobrescribe la tuya. Una recarga forzada descarta una copia vieja en caché.

Conceptos relacionados