Formas de aplicar CSS — Frontend Classroom

El CSS que escribís no llega al navegador por sí solo: necesita ser vinculado al documento HTML. Existen exactamente tres formas de hacer eso — hoja de estilos externa, bloque <style> interno, y atributo style="" inline — y cada una tiene implicancias distintas en rendimiento, mantenibilidad y especificidad. Entender por qué existen las tres y cuándo (no) usar cada una es una de las primeras decisiones de arquitectura que toma alguien que escribe CSS.

Las tres formas son técnicamente válidas y producen estilos que el navegador procesa de la misma manera. La diferencia no está en el qué sino en el dónde: dónde vive el CSS, cómo llega al navegador y qué tan fácil es cambiarlo sin tocar el HTML. En proyectos reales, la separación entre contenido (HTML) y presentación (CSS) no es solo un principio estético — tiene consecuencias directas en la velocidad de carga, en el trabajo colaborativo y en el mantenimiento a largo plazo.

La elección también importa porque afecta la cascada: el CSS inline tiene una especificidad más alta que las reglas de hojas externas o bloques <style>, lo que puede crear conflictos difíciles de depurar si se mezclan las tres formas sin criterio. Conocer las tres permite evitar el caos y elegir la herramienta correcta para cada situación.

Cómo funciona

1. Hoja de estilos externa (`<link rel="stylesheet">`)

La forma estándar y recomendada: escribís el CSS en un archivo .css separado y lo vinculás desde el <head> del HTML con el elemento <link>:

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

El navegador descarga el archivo .css por separado y lo cachea: en la segunda visita, el CSS se carga desde el disco local sin hacer una nueva petición al servidor. Si tenés diez páginas HTML que usan el mismo archivo CSS, el usuario descarga el CSS una sola vez. Eso es rendimiento real.

La separación de archivos también es separación de responsabilidades: el HTML define la estructura y el contenido, el CSS define la presentación. Podés cambiar el diseño completo del sitio editando el .css sin tocar ningún archivo HTML. Podés trabajar en el diseño sin que el desarrollador de contenido vea el CSS.

El atributo href acepta rutas relativas, absolutas y URLs externas (CDNs). El atributo rel="stylesheet" le dice al navegador qué tipo de recurso es — sin él, el <link> no tiene efecto. El atributo type="text/css" fue obligatorio en HTML4 pero es innecesario en HTML5 (el valor por defecto ya es CSS).

2. Bloque `<style>` en el `<head>`

Un bloque <style> dentro del <head> contiene CSS directamente en el HTML. No requiere un archivo externo:

<head>
  <style>
    p {
      color: navy;
      font-size: 1rem;
    }
  </style>
</head>

El CSS del bloque <style> tiene exactamente la misma especificidad que el de una hoja externa — la diferencia es de dónde viene, no de cuánta prioridad tiene. Lo que sí cambia es la posición en el orden de la cascada: si tanto una hoja externa como un bloque <style> definen la misma propiedad para el mismo elemento, gana el que aparece después en el orden del documento.

El bloque <style> es útil en casos específicos: correos electrónicos HTML (donde los clientes de correo suelen bloquear hojas externas), páginas únicas muy pequeñas sin otros archivos, prototipado rápido sin querer crear un archivo extra, o cuando el CSS es específico de una sola página y no tiene sentido en un archivo compartido. En cualquier proyecto real con más de una página, las hojas externas son siempre la mejor opción.

3. Atributo `style=""` inline

El atributo style="" aplica CSS directamente sobre un elemento HTML individual, en el mismo tag:

<p style="color: navy; font-size: 1rem;">Texto con estilo inline</p>

El CSS inline tiene la especificidad más alta de las tres formas — supera a cualquier regla de hoja externa o bloque <style> que apunte al mismo elemento (salvo !important). Eso lo convierte en una herramienta peligrosa: cuando el estilo de un elemento no puede sobreescribirse con reglas normales, la causa suele ser un style="" inline enterrado en el HTML.

Este párrafo tiene style="" inline directamente en el atributo.

El style="" inline sí tiene usos legítimos: cuando el valor de un estilo se genera dinámicamente con JavaScript (posición de un tooltip, color calculado, animación programática), o cuando se trabaja con frameworks de componentes que inyectan estilos por variable (CSS custom properties). Lo que no es un uso legítimo: escribir style="" en el HTML estático para evitar la tarea de crear un archivo CSS.

Por qué la hoja externa es la práctica correcta

La combinación de separación, caché y reutilización hace que la hoja externa sea siempre la elección correcta para cualquier proyecto con más de una página o que sea mantenido por más de una persona:

Separación de responsabilidades: el HTML describe qué es el contenido; el CSS describe cómo se ve. Mezclarlos con <style> interno o style="" hace que cambiar el diseño requiera editar el HTML.
Caché del navegador: el archivo .css se descarga una vez y se reutiliza. Con CSS inline o <style>, el navegador descarga el mismo CSS con cada página HTML.
Mantenibilidad: cambiar el color de todos los títulos es una línea en un archivo. Con CSS inline, es cambiar cada elemento individualmente.
Especificidad predecible: las reglas de una hoja externa se comportan de manera predecible con la cascada. El CSS inline rompe esa predictibilidad al tener especificidad artificialmente alta.

Gotchas conceptuales

El style="" inline “gana” sin razón aparente. Si una regla CSS no tiene efecto sobre un elemento, revisá si ese elemento tiene style="" en el HTML. La especificidad del inline supera a casi todo — la única forma de sobreescribirlo desde CSS es !important, que abre una nueva caja de problemas.
Múltiples <link> son válidos. Se pueden vincular varias hojas de estilo externas en el mismo <head>. Se aplican en orden: si dos archivos definen la misma propiedad para el mismo selector, gana el que aparece después.
El orden importa dentro del <head>. Si tenés un <link> y un <style>, el que aparece después en el documento tiene precedencia cuando la especificidad es igual.
@import dentro de CSS existe pero penaliza el rendimiento. @import url("otro.css") permite importar una hoja desde otra. Es válido pero bloquea la descarga paralela: el navegador espera a descargar el primer archivo para saber que necesita el segundo. Preferí siempre múltiples <link> en el HTML.
En emails, el soporte varía. Algunos clientes de correo (Gmail, Outlook) no soportan <link> externo; ahí el <style> interno o el inline son los únicos caminos. Para web estándar, esto no aplica.

Vigente / legacy

Las tres formas son vigentes y las tres seguirán siéndolo. Lo que cambió históricamente: en HTML4 el atributo type="text/css" en <link> y <style> era obligatorio — en HTML5 es innecesario (el navegador asume CSS por defecto). El atributo media="" en <link> (para aplicar hojas solo a ciertos medios, como media="print") sigue siendo válido y útil. La forma @import es técnicamente vigente pero considerada mala práctica por su impacto en rendimiento.