Aula 91 - Formatação de Textos CSS

Introdução

A formatação de textos em CSS permite controlar a aparência das informações exibidas nas páginas Web.

Podemos alterar alinhamento, tamanho, cor, espaçamento, decoração e diversos outros aspectos dos textos.

📌 Uma boa formatação melhora a leitura e a experiência do usuário.

Principais Propriedades de Texto

Propriedade	Função
color	Define a cor do texto.
text-align	Alinha o texto.
text-decoration	Adiciona decoração.
text-transform	Altera letras maiúsculas e minúsculas.
line-height	Controla espaçamento entre linhas.

Cor do Texto - color

A propriedade color define a cor dos textos.


p {

color:blue;

}

Também podemos utilizar hexadecimal:


h1 {

color:#1f4e79;

}

Alinhamento de Texto

A propriedade text-align controla o alinhamento.

Valor	Resultado
left	Esquerda.
center	Centralizado.
right	Direita.
justify	Justificado.


p {

text-align:center;

}

Decoração do Texto

A propriedade text-decoration adiciona efeitos.


a {

text-decoration:none;

}

Valor	Uso
underline	Sublinhado.
none	Remove decoração.
line-through	Texto riscado.

Transformação de Texto

A propriedade text-transform altera o formato das letras.


h1 {

text-transform:uppercase;

}

Valor	Resultado
uppercase	Tudo maiúsculo.
lowercase	Tudo minúsculo.
capitalize	Primeira letra maiúscula.

Espaçamento entre Linhas

A propriedade line-height melhora a leitura.


p {

line-height:1.8;

}

Muito utilizada em textos longos e artigos.

Espaçamento entre Letras

A propriedade letter-spacing controla a distância entre caracteres.


h1 {

letter-spacing:3px;

}

Espaçamento entre Palavras

A propriedade word-spacing altera a distância entre palavras.


p {

word-spacing:10px;

}

Sombra no Texto

A propriedade text-shadow cria sombras.


h1 {

text-shadow:2px 2px 5px gray;

}

Indentação de Texto

A propriedade text-indent cria recuo na primeira linha.


p {

text-indent:40px;

}

Controle de Espaços

A propriedade white-space controla espaços e quebras.


p {

white-space:normal;

}

Exemplo Completo


.titulo {

color:#333;

text-align:center;

text-transform:uppercase;

letter-spacing:2px;

}


.texto {

line-height:1.6;

text-align:justify;

}

Boas Práticas

Utilizar fontes legíveis.
Manter bom contraste de cores.
Evitar textos muito pequenos.
Utilizar espaçamento adequado.
Pensar na acessibilidade.

Erros Comuns

Erro	Problema
Texto sem contraste	Dificulta leitura.
Excesso de decoração	Polui visualmente.
Espaçamento inadequado	Causa desconforto.

Resumo Final

Propriedade	Função
color	Cor do texto.
text-align	Alinhamento.
text-decoration	Decoração.
line-height	Espaçamento de linhas.

📌 A formatação correta dos textos é essencial para criar interfaces profissionais e agradáveis.

✍️ Formatação de Textos CSS