Cómo definir estilos CSS para un documento HTML

CSS controla el aspecto de un documento HTML, pero el navegador necesita saber dónde encontrar esas reglas de estilo. Existen tres formas de adjuntar CSS a una página HTML, y cada una se adapta a una situación diferente:

Estilo en línea — coloca las reglas directamente en un elemento individual usando su atributo style.
Estilo interno (embebido) — agrupa las reglas dentro de un elemento <style> en la sección <head> de la página.
Estilo externo — guarda las reglas en un archivo .css separado y enlázalo desde la página.

Esta página cubre los tres métodos, cuándo usar cada uno y cómo interactúan cuando más de uno apunta al mismo elemento. Si eres nuevo en la estructura de una regla CSS (selector, propiedad, valor), lee primero CSS Syntax.

Estilo en línea

Un estilo en línea se escribe directamente en un elemento usando su atributo style. Las reglas se aplican solo a ese elemento individual. El atributo contiene una o más declaraciones (propiedad: valor) separadas por punto y coma — no se necesita selector ni llaves, porque el elemento al que se aplica la regla es el mismo en el que está escrita.

Cuándo usarlo: para ajustes puntuales rápidos o para estilos generados dinámicamente (por ejemplo, con JavaScript). Evítalo para el estilo general — como la regla vive en el elemento, no puedes reutilizarla y es difícil de mantener en una página grande.

Ejemplo de creación de un estilo en línea para un documento HTML:

Ejemplo de estilo CSS en línea

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2 style="color:#1c87c9">Some heading</h2>
    <p style="color:#8ebf42; font-size:15px">Some paragraph</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Analicemos el ejemplo. En la etiqueta <h2> escribimos style="color:#1c87c9", por lo que el texto de ese encabezado se muestra en el color azul #1c87c9.

Hicimos lo mismo en la etiqueta <p> con style="color:#8ebf42; font-size:15px". Las dos declaraciones están separadas por un punto y coma: el texto entre las etiquetas de apertura <p> y cierre </p> se colorea con #8ebf42 (verde) y tiene un tamaño de 15px.

Estilo interno

Con un estilo interno (o embebido), el CSS de una página vive dentro de un elemento <style> en el <head> de la página. A diferencia de los estilos en línea, aquí se escriben reglas completas — un selector seguido de un bloque de declaraciones entre llaves — por lo que una regla puede apuntar a muchos elementos a la vez.

Cuándo usarlo: para una sola página que necesita su propio estilo y no se comparte con el resto del sitio, o para prototipos rápidos. La desventaja es que las reglas solo afectan a esa página. Para dar el mismo estilo a varias páginas, habría que copiar el bloque <style> en cada una — exactamente el problema que resuelven las hojas de estilo externas.

En el ejemplo siguiente, la regla body pinta el fondo de la página con #1c87c9 (azul) y la regla p hace que el texto de los párrafos sea blanco.

Ejemplo de creación de un estilo interno para un documento HTML:

Ejemplo de estilo CSS interno

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #1c87c9;
      }
      p {
        color: white;
      }
    </style>
  </head>
  <body>
    <p>Some information</p>
  </body>
</html>

Pruébalo tú mismo »

Estilo externo

Una hoja de estilo externa mantiene todo el CSS en su propio archivo, separado del HTML. Este es el enfoque estándar para sitios web reales, ya que cada página puede enlazar el mismo archivo y compartir un aspecto uniforme. Puedes crear el archivo con cualquier editor de texto o editor HTML como Notepad o Sublime Text.

El archivo contiene solo CSS — sin etiquetas HTML — y se guarda con la extensión .css. Para adjuntarlo a una página, añade una etiqueta <link> dentro de la sección <head>. Cada página que deba usar esos estilos necesita su propio <link>.

Cuándo usarlo: casi siempre para un sitio de varias páginas. Como las reglas están en un solo lugar, cambiar un color o una fuente en ese único archivo .css actualiza todas las páginas de una vez, y el navegador puede almacenar el archivo en caché para descargarlo solo una vez.

Ejemplo de creación de un estilo externo para un documento HTML:

Ejemplo de estilo CSS externo

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Un archivo style.css correspondiente podría verse así:

body {
  background-color: #1c87c9;
}
p {
  color: white;
}

¿Qué método deberías usar?

Como regla general:

Usa una hoja de estilo externa para casi todo el trabajo real — es reutilizable, se puede almacenar en caché y es fácil de mantener.
Usa estilos internos para una página única o una demostración rápida.
Usa estilos en línea solo para un ajuste puntual que no puedas expresar de otra manera (a menudo un valor calculado dinámicamente).

Cómo interactúan los métodos

Cuando el mismo elemento es apuntado por más de un método, el navegador debe decidir qué declaración prevalece. En igualdad de condiciones, el orden de prioridad es:

Estilos en línea (mayor prioridad).
Reglas internas y externas, decididas por la especificidad del selector y, cuando hay empate de especificidad, por cuál regla aparece última.

Por lo tanto, un style="color:red" en línea sobreescribe una regla p { color: blue; } de una hoja de estilo. Este sistema de prioridades se llama cascada — la "C" de CSS.

Práctica

¿Cuáles son las formas de incluir CSS en HTML?