Estilos HTML

Já consegue construir a estrutura da página e apontar para outros ficheiros com caminhos. A pergunta seguinte dos principiantes é como mudar a aparência do conteúdo: cor do texto, fundo e tamanho. Na prática inicial de HTML pode fazer isso com o atributo style. É uma pequena porta para ideias de CSS — útil para demos — enquanto o design completo do site se move para CSS próprio mais à frente no percurso de aprendizagem.

O que é o atributo style?

O atributo style permite anexar declarações CSS diretamente à etiqueta de início de um elemento HTML. O navegador lê essas declarações e pinta esse elemento em conformidade. Não está a inventar uma segunda linguagem do zero: está a escrever regras CSS curtas num sítio que o HTML já fornece. Por isso o estilo em linha é uma boa ferramenta didática, mesmo que projetos profissionais raramente mantenham todo o design dentro de atributos.

Resposta direta

Adicione aparência com style="property: value;" num elemento. Propriedades iniciais incluem color (cor de primeiro plano do texto), background-color (a área atrás do conteúdo) e font-size (tamanho do texto). Ponha a lista inteira entre aspas. Separe várias declarações com ponto e vírgula. Em sites reais com várias páginas, prefira um ficheiro CSS ou um bloco <style> para não repetir o mesmo aspeto em cada etiqueta — mas nesta lição foque-se em ler e escrever declarações em linha claras.

Propriedade e valor, um de cada vez

Cada declaração tem uma propriedade (o que quer mudar) e um valor (como deve parecer). Um dois-pontos fica entre eles. Os principiantes devem aprender bem algumas propriedades antes de memorizar uma lista enorme.

Ler o exemplo

• color: blue muda só a cor do texto desse parágrafo
• background-color: lightyellow colore o fundo atrás do texto
• font-size: 24px define o tamanho; px é uma unidade comum para principiantes
• Cada parágrafo tem o seu próprio style="..." para os três efeitos ficarem separados e fáceis de ver
• Cores com nome como blue servem para prática; mais tarde também verá valores hex como #336699
  Se nada mudar no navegador, confirme que guardou o ficheiro, atualizou a página e manteve as aspas em torno de todo o valor style.

Várias declarações num só atributo

Pode combinar declarações dentro de um único atributo style. Mantenha a lista curta para o HTML continuar legível. Termine cada declaração com ponto e vírgula — incluir um final também é válido e muitas vezes mais claro quando editar depois.

Porque este padrão importa

• Um elemento pode levar cor, fundo e tamanho juntos
• Os pontos e vírgulas separam as declarações para o navegador analisar cada par
• #f0f0f0 é uma cor hex; é opcional para principiantes mas comum em CSS real
• A frase visível dentro do parágrafo é texto HTML normal; só o atributo style muda a aparência
  Evite enfiar dez decisões de design num atributo no primeiro dia. Aprenda a sintaxe com duas ou três propriedades claras primeiro.

Style em elementos diferentes

O atributo style não se limita a p. Títulos, spans e muitos outros elementos podem usá-lo da mesma forma. Isso ajuda a ver que o estilo segue o elemento a que o anexa — não um interruptor mágico global.

O que notar

• A cor do h1 não restiliza automaticamente os parágrafos
• O segundo parágrafo combina fundo e tamanho de letra
• O estilo em linha é local: afeta esse elemento (e, pelas regras normais de CSS, pode influenciar filhos — mas mantenha as demos simples por agora)

Style em linha agora, CSS depois

O style em linha é rápido para experiências. Torna-se doloroso quando vinte páginas precisam da mesma cor azul-marinho no título e tem de editar vinte atributos. CSS partilhado — um bloco <style> no head do documento, ou um ficheiro .css externo — mantém o aspeto num só sítio. Este curso inclui aprendizagem dedicada de CSS mais à frente. Nesta sessão de HTML, o seu trabalho é compreender a ideia property:value e escrever alguns exemplos em linha corretos, sem tratar o estilo em linha como a arquitetura final de um site inteiro.

Pratique no seu editor

1. Crie uma página com um h1 e três parágrafos curtos.
2. Dê ao primeiro parágrafo um color de texto.
3. Dê ao segundo um background-color.
4. Dê ao terceiro uma combinação de color e font-size.
5. Opcionalmente colore o h1 com o seu próprio style.
6. Guarde e atualize. Confirme que cada bloco parece diferente.
7. Parta de propósito um exemplo (remova uma aspas ou um px), atualize, veja a falha e depois corrija.
   Trabalhar um style falhado ensina aspas e unidades mais depressa do que só copiar amostras perfeitas.

Erros que escondem os seus estilos

• Esquecer aspas em torno do valor: style=color:red é inválido na escrita normal de atributos HTML
• Confundir color (texto) com background-color (atrás do texto) e pensar que «a cor não fez nada»
• Omitir unidades onde o tamanho as precisa (font-size: 24 em vez de 24px em muitos casos de principiante)
• Usar um processador de texto que troca aspas retas por aspas curvas dentro de atributos
• Enfiar o design de uma página inteira em estilos em linha em vez de aprender CSS partilhado a seguir
• Alterar o ficheiro mas esquecer de guardar antes de atualizar — o navegador ainda mostra a versão antiga

Resumo

• O atributo style adiciona declarações CSS a um elemento HTML
• Escreva property: value; e mantenha a lista inteira entre aspas
• Propriedades iniciais: color, background-color, font-size
• Combine algumas declarações com ponto e vírgula; mantenha as demos curtas e legíveis
• O estilo em linha é excelente para aprender e experiências pequenas, não para manter o design de um site inteiro
• O CSS partilhado vem a seguir no percurso quando quiser um sítio único para controlar o aspeto
• Verifique sempre com guardar + atualizar, e confira aspas e unidades quando os estilos «misteriosamente» falham