Las tres formas de aplicar CSS

Ya sabés escribir una regla CSS. Ahora: ¿dónde se pone esa regla? Hay tres caminos. Vas a conocer los tres y a entender por qué uno es claramente el mejor para el trabajo del día a día.

1. Hoja externa (la recomendada)

Un archivo .css separado, vinculado desde el <head> con <link rel="stylesheet"> — exactamente lo que viste en CAT-11:

<!-- en el HTML -->
<head>
  <link rel="stylesheet" href="estilos.css">
</head>

/* en estilos.css */
h1 { color: teal; }
p  { color: gray; }

En el sandbox, la pestaña CSS es esta hoja externa simulada. El motor toma lo que escribís en esa pestaña y lo aplica como si fuera estilos.css. No ves el <link> ni el archivo — ves una pestaña, y esa pestaña representa la hoja externa.

Por qué es la forma recomendada:

Separación de responsabilidades. El HTML describe la estructura; el CSS, el aspecto. Mantenerlos en archivos separados hace cada uno más legible y enfocado.
Reutilización entre páginas. Un solo estilos.css puede estilar 1 o 100 páginas. Cambiás el color de marca en un lugar y se actualiza en todo el sitio.
Cacheo. El navegador descarga estilos.css una sola vez y lo reutiliza en las páginas siguientes — cargas más rápidas. El CSS inline o interno se re-descarga con cada página porque viaja dentro del HTML.
Mantenibilidad. Un cambio de estilo se hace en un archivo, no buscando style="" repartidos por todo el marcado.

2. `<style>` interno

Un bloque <style> dentro del <head> del propio HTML. El CSS vive en el mismo archivo que el HTML:

<head>
  <style>
    h2 { color: purple; }
  </style>
</head>

La sintaxis adentro es idéntica a la de la hoja externa — reglas completas con selector, llaves y declaraciones. La diferencia es dónde vive: no en un archivo separado, sino envuelto en <style>.

Cuándo se usa: páginas de una sola página sin archivo CSS separado, o estilos muy específicos de un documento que no aplican en ningún otro lado.

3. `style=""` inline

Un atributo style directamente en el elemento. No lleva selector ni llaves — solo declaraciones, porque el elemento ya está “seleccionado” por estar ahí:

<p style="color: green;">Texto verde</p>

Si querés dos declaraciones inline, las separás con ;:

<p style="color: green; background-color: white;">Texto verde</p>

Cuándo se usa: retoques muy puntuales sobre un único elemento, o estilos generados por código. No es la forma adecuada para el trabajo normal.

Por qué es la menos recomendable:

No reutilizable. El style="" aplica solo a ese elemento. Repetir el mismo estilo en 20 elementos = 20 atributos idénticos.
Mezcla estructura y presentación en la misma línea: el HTML se vuelve ruidoso y difícil de leer.
Difícil de mantener. Cambiar un color obliga a editar cada atributo.

Un titular para la próxima lección

Las tres formas pueden chocar: si estilos.css dice h1 { color: gray } pero el elemento tiene style="color: teal", ¿cuál gana?

El inline gana. Siempre tiene más “peso” que el <style> interno y que la hoja externa. Por qué se calcula así — la cascada y la especificidad — es CAT-14. Por ahora alcanza con saber que si algo “no estila” aunque lo pusiste en la hoja externa, revisá si hay un inline pisándolo.

Límite del motor: el validador comprueba que cada elemento tenga el color pedido comparando el valor computado. No puede distinguir si ese color llegó por la hoja externa, el <style> interno o el inline — los tres producen el mismo resultado (getComputedStyle). Que uses la forma indicada para cada elemento es parte del ejercicio; el check confirma el efecto.

Tu turno: en el documento completo, aplicá teal al <h1> desde la pestaña CSS, purple al <h2> con un <style> interno en el <head>, y green al <p> con un atributo style="" inline. Hacé clic en “Comprobar”.