EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Estilos HTML

O HTML cuida da estrutura de uma página web, enquanto o CSS (Cascading Style Sheets) cuida da aparência. Você pode escrever estilos em HTML de três formas: estilos inline, folhas de estilo internas e folhas de estilo externas.

Estilos Inline

Escreva o CSS diretamente no atributo style de um elemento — afeta apenas esse elemento específico:

Exemplo

HTML 
<p style="color: blue; font-size: 18px;">
Este é um parágrafo com texto azul e grande.
</p>
<div style="background: #f0f0f0; padding: 20px; border-radius: 8px;">
Este é um card cinza com cantos arredondados.
</div>
▶ Experimente
💡 Quando Usar: Estilos inline têm a prioridade mais alta e são ótimos para testes rápidos ou cenários onde o JavaScript modifica estilos dinamicamente. No entanto, evite-os em produção, pois são difíceis de manter.

Folha de Estilo Interna

Defina os estilos dentro do <head> usando a tag <style> — todos os elementos da página podem referenciá-los:

Exemplo

HTML 
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: #333; text-align: center; }
    .card {
      background: #fff;
      border: 1px solid #ddd;
      padding: 16px;
      border-radius: 8px;
    }
</style>
</head>
<body>
<h1>Minha Página</h1>
<div class="card">Este é um card</div>
</body>
</html>
▶ Experimente

Folha de Estilo Externa

Escreva o CSS em um arquivo .css separado e inclua-o com <link>. Esta é a abordagem mais recomendada — um único arquivo CSS pode controlar o estilo de um site inteiro:

Exemplo

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

<!-- Conteúdo de style.css: -->
<!-- h1 { color: navy; } -->
<!-- .highlight { background: yellow; } -->
▶ Experimente
📌 Prioridade dos Três Métodos: Estilos inline > Folha de estilo interna > Folha de estilo externa > Estilos padrão do navegador. Quando o mesmo elemento é estilizado por múltiplos métodos, o de maior prioridade prevalece.

Visão Geral das Propriedades CSS Mais Comuns

Aqui estão algumas das propriedades CSS mais usadas em HTML — domine-as e você conseguirá criar páginas com boa aparência:

❓ Perguntas Frequentes

P Qual é a diferença entre estilos inline, internos e externos?
R Três abordagens：1）Estilos inline (atributo style) afetam apenas o elemento atual, escritos dentro das tags HTML; 2）Estilos internos (tag <style>) afetam a página atual, escritos no <head>; 3）Estilos externos (arquivo .css via <link>) afetam todas as páginas que os referenciam. Prioridade：inline > interno > externo. Na prática, use folhas de estilo externas em 95% dos casos.
P Por que folhas de estilo externas são recomendadas?
R Folhas de estilo externas têm quatro vantagens principais：1）Reutilização — múltiplas páginas compartilham um arquivo CSS, mude uma vez, atualize todas; 2）Cache — navegadores armazenam em cache arquivos CSS, tornando carregamentos subsequentes mais rápidos; 3）Separação — HTML lida com estrutura, CSS com estilo, responsabilidades claras, manutenção mais fácil; 4）Colaboração — desenvolvedores front-end podem trabalhar em paralelo sem conflitos. Estilos inline são apenas para depuração e casos extremos.
P Como a prioridade de estilos é calculada?
R Prioridade do maior para o menor：1）!important (use com cuidado — perturba prioridade); 2）Estilos inline (atributo style); 3）Seletores de ID (#id); 4）Seletores de classe (.class), seletores de atributo, pseudo-classes; 5）Seletores de elemento (p, div), pseudo-elementos; 6）Seletor universal (*), estilos herdados. Mesma prioridade：regras posteriores sobrescrevem anteriores. Não abuse de !important; use especificidade do seletor para controlar prioridade.
P Quando devo usar estilos inline?
R Estilos inline têm casos de uso muito limitados：1）JavaScript modificando estilos dinamicamente (element.style.color = 'red'); 2）Depuração rápida (visualização temporária); 3）Templates de e-mail (clientes de e-mail suportam mal <style>). Para tudo o mais, use folhas de estilo internas ou externas. Desvantagens dos estilos inline：difíceis de manter, não reutilizáveis, prioridade muito alta torna difícil sobrescrever.

📖 Resumo

📝 Atividades

  1. Prática de estilos: Crie uma página HTML e use os três métodos de estilização em elementos diferentes. Observe o efeito de prioridade.
  2. Design de card: Use estilos inline para criar um componente de card com título, descrição de imagem e botão.
  3. Estilos externos: Crie um arquivo style.css, inclua-o com <link> e aplique estilos a vários elementos da página.
100%