Docs ejecutables de CSS: CSS en línea

Q: ¿Qué es el CSS en línea?

Es CSS escrito en el atributo style de un elemento, como . Las declaraciones se aplican solo a ese elemento, sin selector.

Q: ¿Cuáles son las 3 formas de agregar CSS a HTML?

En línea, con el atributo style en un elemento; interno, con un elemento en la página; y externo, con un archivo .css aparte vinculado con en el . Para un sitio completo lo habitual es el archivo externo.

Q: ¿Se puede usar hover en CSS en línea?

No. El atributo style solo acepta declaraciones, así que ahí no se pueden escribir pseudoclases como :hover, pseudoelementos como ::before ni reglas @media. Ponlos en un elemento o en una hoja de estilo.

Qué es el CSS en línea

El CSS en línea es CSS escrito directamente en un elemento HTML con el atributo style. El valor es una lista de declaraciones, property: value;, y se aplican solo a ese elemento.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

No hay selector ni llaves: el objetivo es el elemento que lleva el atributo. Separa las declaraciones con punto y coma. El último punto y coma es opcional, pero mantenerlo hace que agregar la siguiente declaración sea seguro.

Sintaxis

<element style="property: value; property: value;">

Parte	Ejemplo	Notas
Atributo	`style="..."`	Un atributo global: se permite en todos los elementos HTML
Declaración	`color: #2563eb;`	La misma sintaxis que dentro de una regla de una hoja de estilo
Varias declaraciones	`padding: 8px; border: 1px solid #e5e7eb;`	Separadas por `;`
Comillas dentro	`style="font-family: 'Courier New', monospace;"`	Usa comillas simples dentro del atributo entre comillas dobles

Todo lo que no sea una declaración no está permitido. :hover, ::before, @media y los selectores no tienen lugar en un atributo style.

Las 3 formas de agregar CSS a HTML

El CSS llega a una página de tres formas. Esta página trata la primera; el CSS externo e interno tiene su propia página.

Método	Dónde vive el CSS	Alcance	Uso típico
En línea	Atributo `style` en un elemento	Ese elemento	Valores puntuales, valores que pone JavaScript
Interno	Elemento `<style>` en la página	Esa página	Demos de una sola página, plantillas de email, CSS crítico
Externo	Un archivo `.css`, vinculado con `<link>`	Todas las páginas que lo vinculan	Dar estilo a un sitio completo

El mismo párrafo con estilo de las tres formas (el archivo externo aparece como comentario, porque la vista previa no tiene un segundo archivo que cargar):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

El tercer párrafo conserva el padding y el radio de la regla .note y solo reemplaza el fondo, porque el estilo en línea define únicamente esa propiedad.

Por qué ganan los estilos en línea

Cuando una regla de una hoja de estilo y un estilo en línea definen la misma propiedad, gana el estilo en línea. No importa qué tan específico sea el selector: incluso un selector de ID pierde.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

La única excepción es !important. Una declaración de una hoja de estilo marcada con !important le gana a una declaración en línea normal, y un !important en línea le gana a ambas. Por eso los estilos en línea hacen que un sitio sea difícil de mantener: para cambiarlos desde una hoja de estilo necesitas !important, y eso inicia una escalada. La página de !important explica el orden completo.

Cuándo el CSS en línea es la herramienta correcta

Los estilos en línea encajan bien cuando el valor es un dato y no parte del diseño: cambia en cada elemento y lo escribe una plantilla o JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

El aspecto (colores, altura, radio) vive en la hoja de estilo. Solo el ancho, que es distinto en cada barra, va en línea. JavaScript escribe el mismo atributo a través de element.style:

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

Después del clic, el HTML del párrafo queda style="color: rgb(245, 158, 11); font-weight: bold;". Los nombres de propiedades con guion pasan a camelCase en JavaScript (font-weight es fontWeight).

Una variable CSS suele ser el punto medio más limpio: define solo la variable en línea, style="--progress: 35%", y deja que la hoja de estilo la use. Consulta variables CSS.

Dónde se queda corto el CSS en línea

Sin estados ni pseudoelementos. No puedes escribir :hover, :focus ni ::before en un atributo style.
Sin media queries. Un ancho en línea no puede cambiar en un teléfono.
Repetición. Diez botones con el mismo estilo en línea son diez lugares que editar.
Difícil de sobrescribir. Solo un !important en una hoja de estilo le gana.
Content Security Policy. Una CSP estricta sin 'unsafe-inline' en style-src bloquea los atributos style escritos en el HTML.

Errores comunes

Escribir un selector o llaves dentro de style. style="p { color: red }" se ignora. Ahí solo van declaraciones.
Usar = en vez de :. Es color: red, no color=red.
Anidar comillas dobles. style="font-family: "Arial"" cierra el atributo antes de tiempo. Usa comillas simples dentro.
Olvidar las unidades. style="width: 200" se ignora; escribe 200px. Una longitud de 0 es la única que puede omitir su unidad.
Dar estilo en línea a todo un sitio. Pasa los estilos repetidos a una clase en una hoja de estilo y deja los estilos en línea para valores de cada elemento.

Preguntas frecuentes

¿Qué es el CSS en línea?

Es CSS escrito en el atributo style de un elemento, como <p style="color: red;">. Las declaraciones se aplican solo a ese elemento, sin selector.

¿Cuáles son las 3 formas de agregar CSS a HTML?

En línea, con el atributo style en un elemento; interno, con un elemento <style> en la página; y externo, con un archivo .css aparte vinculado con <link rel="stylesheet" href="styles.css"> en el <head>. Para un sitio completo lo habitual es el archivo externo.

¿El CSS en línea sobrescribe al CSS externo?

Sí, en la mayoría de los casos. Una declaración en el atributo style le gana a cualquier selector de una hoja de estilo, sin importar su especificidad. La hoja de estilo solo gana con !important, y un !important en línea le gana también a ese.

¿Usar CSS en línea es una mala práctica?

Para dar estilo a un sitio completo, sí: se repite, no admite :hover ni media queries y es difícil de sobrescribir. Está bien para valores puntuales que pone JavaScript o una plantilla, como el ancho de una barra de progreso o un color elegido por el usuario.

¿Se puede usar hover en CSS en línea?

No. El atributo style solo acepta declaraciones, así que ahí no se pueden escribir pseudoclases como :hover, pseudoelementos como ::before ni reglas @media. Ponlos en un elemento <style> o en una hoja de estilo.

Conceptos relacionados