HTML: Estilos HTML

Última atualização: 2026-10-13

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.

Tags nesta seção: <head> <style> <link>

1. Estilos Inline

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

▶ Exemplo

▶ 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.

2. Folha de Estilo Interna

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

▶ Exemplo

▶ Experimente

3. 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

▶ 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.

4. 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:

color — Cor do texto
background-color — Cor de fundo
font-size — Tamanho da fonte
font-weight — Espessura da fonte (bold = mais espessa)
text-align — Alinhamento do texto (left/center/right)
padding — Espaçamento interno (entre o conteúdo e a borda)
margin — Espaçamento externo (entre os elementos)
border — Borda
width / height — Largura e altura
display — Modo de exibição (block/inline/flex/none)

Tags nesta seção: <head> <style> <link>

❓ 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

Três formas de escrever estilos: inline (atributo style), interno (tag <style>), externo (<link> para arquivo .css)
Folhas de estilo externas são a melhor prática — reutilizáveis, armazenáveis em cache e separam estrutura de apresentação
Prioridade de estilos: Inline > Interno > Externo > Padrão do navegador
Propriedades CSS consistem em pares "nome-da-propriedade: valor", separados por ponto e vírgula

📝 Exercícios

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.
Design de card: Use estilos inline para criar um componente de card com título, descrição de imagem e botão.
Estilos externos: Crie um arquivo style.css, inclua-o com <link> e aplique estilos a vários elementos da página.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós