Carregando...

Texto em CSS

Já dimensionou caixas e controlou o overflow. Agora dê forma às palavras. As propriedades de texto em CSS tratam alinhamento, sublinhado, maiúsculas/minúsculas, espaçamento e altura de linha — ainda sem mudar a família tipográfica (isso vem a seguir).

Ferramentas quotidianas de texto

📊 Propriedades de texto comuns

Propriedade Trabalho do dia a dia
text-align Alinha o texto na linha: left, right, center, justify
text-decoration Adiciona ou remove sublinhado, sobreriscado ou rasurado
text-transform Muda a capitalização: uppercase, lowercase, capitalize
line-height Define a altura de cada linha — chave para parágrafos legíveis
letter-spacing Ajusta o espaço entre letras

Alinhar o texto

text-align coloca o texto no eixo horizontal do seu bloco contentor.

Centrar um título

css
CSS Code 
.hero-title {
text-align: center;
color: #0f172a;
}

Decoração — sublinhado e companhia

text-decoration desenha linhas no texto. Ligações costumam vir sublinhadas; remova com none, ou adicione underline / line-through quando o design pedir.

Amostras de decoração

css
CSS Code 
.link-quiet {
text-decoration: none;
color: #2563eb;
}

.sale {
text-decoration: line-through;
color: #64748b;
}

.note {
text-decoration: underline;
}

Transformar a capitalização

text-transform muda como as letras aparecem sem reescrever o texto HTML.

Transformações de capitalização

css
CSS Code 
.label {
text-transform: uppercase;
letter-spacing: 0.06em;
}

.city {
text-transform: capitalize;
}

Altura de linha para parágrafos legíveis

line-height controla o ritmo vertical das linhas. Valores sem unidade como 1.5 escalam com o tamanho da fonte e são uma escolha calma para o corpo.

Altura de linha confortável

css
CSS Code 
.article p {
line-height: 1.6;
color: #334155;
}

Espaçamento de letras — toque leve

Um pouco de letter-spacing pode abrir um título curto. Deixe os parágrafos do corpo sobretudo naturais, salvo se o design realmente pedir.

Título com tracking leve

css
CSS Code 
.section-title {
text-align: left;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
}

Experimente você

  1. Centre um h1 com text-align: center.
  2. Remova o sublinhado de uma ligação com text-decoration: none; opcionalmente devolva no hover.
  3. Ponha uma etiqueta pequena em maiúsculas com text-transform: uppercase.
  4. Defina o line-height do parágrafo para 1.6 e compare com 1.2.
  5. Dê um pequeno letter-spacing a um título — e verifique se continua legível.

Erros comuns

  • Usar text-align: center à espera de centrar todo o layout de bloco (isso é layout, não só texto)
  • Deixar todas as ligações sublinhadas quando o design quer ligações discretas — ou remover o sublinhado sem outro sinal
  • Trazer aqui font-family e font-size (pertencem à lição Fonts)
  • letter-spacing enorme em parágrafos longos (difícil de ler)
  • Confundir ferramentas de reticências de overflow de texto com estas bases (mais tarde)

Resumo

  • text-align alinha texto à esquerda, direita, centro ou justify
  • text-decoration adiciona ou remove sublinhados e linhas semelhantes
  • text-transform muda a capitalização sem editar HTML
  • line-height molda a legibilidade do parágrafo
  • Um letter-spacing leve pode polir títulos curtos
  • As fontes vêm a seguir; esta lição fica em como o texto assenta e se lê

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 26 de 35
Css Tutorial