CSS inline é o CSS escrito no atributo style de um elemento, como . As declarações valem só para esse elemento, sem seletor.

Docs executáveis de CSS: CSS Inline

Q: Quais são as 3 formas de colocar CSS no HTML?

Inline, com o atributo style no elemento; interno, com um elemento na página; e externo, com um arquivo .css separado ligado por no . O arquivo externo é a escolha comum para um site inteiro.

Q: O CSS inline sobrescreve o CSS externo?

Sim, na maioria dos casos. Uma declaração no atributo style vence qualquer seletor de uma folha de estilo, seja qual for a especificidade. A folha de estilo só vence com !important, e um !important inline vence até isso.

Q: Dá para usar hover no CSS inline?

Não. O atributo style só aceita declarações, então pseudo-classes como :hover, pseudo-elementos como ::before e regras @media não podem ser escritos ali. Coloque-os em um elemento ou em uma folha de estilo.

O que é CSS inline

CSS inline é o CSS escrito direto em um elemento HTML com o atributo style. O valor é uma lista de declarações, property: value;, e elas valem apenas para esse 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>

Não há seletor nem chaves: o alvo é o próprio elemento que tem o atributo. Separe as declarações com ponto e vírgula. O último ponto e vírgula é opcional, mas mantê-lo deixa seguro acrescentar a próxima declaração.

Sintaxe

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

Parte	Exemplo	Observações
Atributo	`style="..."`	Atributo global: permitido em qualquer elemento HTML
Declaração	`color: #2563eb;`	A mesma sintaxe de dentro de uma regra da folha de estilo
Várias declarações	`padding: 8px; border: 1px solid #e5e7eb;`	Separadas por `;`
Aspas internas	`style="font-family: 'Courier New', monospace;"`	Use aspas simples dentro do atributo entre aspas duplas

Tudo o que não for declaração é proibido. :hover, ::before, @media e seletores não cabem em um atributo style.

As 3 formas de colocar CSS no HTML

O CSS chega a uma página de três formas. Esta página trata da primeira; o CSS externo e interno tem página própria.

Método	Onde fica o CSS	Alcance	Uso típico
Inline	Atributo `style` em um elemento	Esse elemento	Valores pontuais, valores definidos por JavaScript
Interno	Elemento `<style>` na página	Essa página	Demos de uma página, templates de e-mail, CSS crítico
Externo	Um arquivo `.css`, ligado com `<link>`	Toda página que o liga	Estilizar um site inteiro

O mesmo parágrafo estilizado das três formas (o arquivo externo aparece como comentário, porque a prévia não tem um segundo arquivo para carregar):

<!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>

O terceiro parágrafo mantém o padding e o raio da regra .note e só troca o fundo, porque o estilo inline define apenas essa propriedade.

Por que o estilo inline vence

Quando uma regra da folha de estilo e um estilo inline definem a mesma propriedade, o inline vence. Não importa quão específico seja o seletor: até um seletor de ID perde.

<!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>

A única exceção é !important. Uma declaração da folha de estilo marcada com !important vence uma declaração inline normal, e um !important inline vence as duas. Por isso o estilo inline deixa um site difícil de manter: para alterá-lo pela folha de estilo você precisa de !important, e isso começa uma escalada. A página sobre !important mostra a ordem completa.

Quando o CSS inline é a ferramenta certa

O estilo inline combina com valores que são dados, não design: mudam de elemento para elemento e são escritos por um template ou por 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>

A aparência (cores, altura, raio) fica na folha de estilo. Só a largura, que muda em cada barra, é inline. O JavaScript escreve o mesmo atributo por meio 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>

Depois do clique, o HTML do parágrafo fica style="color: rgb(245, 158, 11); font-weight: bold;". Nomes de propriedade com hífen viram camelCase no JavaScript (font-weight vira fontWeight).

Uma variável CSS costuma ser o meio-termo mais limpo: defina só a variável inline, style="--progress: 35%", e deixe a folha de estilo usá-la. Veja variáveis CSS.

Onde o CSS inline deixa a desejar

Sem estados nem pseudo-elementos. Não dá para escrever :hover, :focus ou ::before em um atributo style.
Sem media queries. Uma largura inline não muda no celular.
Repetição. Dez botões com o mesmo estilo inline são dez lugares para editar.
Difícil de sobrescrever. Só um !important na folha de estilo vence.
Content Security Policy. Uma CSP rígida sem 'unsafe-inline' em style-src bloqueia atributos style escritos no HTML.

Erros comuns

Escrever seletor ou chaves dentro de style. style="p { color: red }" é ignorado. Ali só entram declarações.
Usar = no lugar de :. É color: red, não color=red.
Aninhar aspas duplas. style="font-family: "Arial"" fecha o atributo antes da hora. Use aspas simples por dentro.
Esquecer as unidades. style="width: 200" é ignorado; escreva 200px. Um comprimento 0 é o único que pode ficar sem unidade.
Estilizar o site inteiro inline. Leve os estilos repetidos para uma classe na folha de estilo e deixe o inline para valores de cada elemento.

Perguntas frequentes

O que é CSS inline?

CSS inline é o CSS escrito no atributo style de um elemento, como <p style="color: red;">. As declarações valem só para esse elemento, sem seletor.

Quais são as 3 formas de colocar CSS no HTML?

Inline, com o atributo style no elemento; interno, com um elemento <style> na página; e externo, com um arquivo .css separado ligado por <link rel="stylesheet" href="styles.css"> no <head>. O arquivo externo é a escolha comum para um site inteiro.

O CSS inline sobrescreve o CSS externo?

Sim, na maioria dos casos. Uma declaração no atributo style vence qualquer seletor de uma folha de estilo, seja qual for a especificidade. A folha de estilo só vence com !important, e um !important inline vence até isso.

Usar CSS inline é má prática?

Para estilizar um site inteiro, sim: ele se repete, não aceita :hover nem media queries e é difícil de sobrescrever. Para valores pontuais definidos por JavaScript ou por um template, como a largura de uma barra de progresso ou uma cor escolhida pelo usuário, ele funciona bem.

Dá para usar hover no CSS inline?

Não. O atributo style só aceita declarações, então pseudo-classes como :hover, pseudo-elementos como ::before e regras @media não podem ser escritos ali. Coloque-os em um elemento <style> ou em uma folha de estilo.

Conceitos relacionados