Como formatar textos em CSS

A formatação de textos em páginas web é um dos elementos mais essenciais para garantir uma boa experiência de leitura e navegação. O CSS (Cascading Style Sheets) é a linguagem usada para definir o estilo dos textos e outros elementos em uma página HTML, oferecendo uma série de propriedades que podem ser ajustadas para garantir que seu conteúdo seja claro, legível e visualmente atraente. Neste post, vamos explorar as principais propriedades de CSS e aprender como formatar textos em CSS, explicando cada uma delas com exemplos práticos.

Mãos na massa!

Abaixo estão listados essas propriedades e a descrição de suas funcionalidades. Veja:

letter-spacing: Especifica o espaçamento adicional a ser introduzido entre os caracteres do texto contido no elemento:

body {letter-spacing: normal}
p span {letter-spacing: 2px}

word-spacing:Especifica o espaçamento adicional a ser introduzido entre as palavras do texto contido no elemento:

body {word-spacing: normal}
div p {word-spacing: 2px}

text-decoration: Especifica características de apresentação do texto contido no elemento:

p {text-decoration: none}
span {text-decoration: underline}    
    
/* overline: linha contínua acima do texto; line-through: linha contínua cortando o texto ao meio; blink: o texto ficará piscando */

text-transform:Especifica o tipo dos caracteres do texto contido no elemento com relação a maiúsculas e minúsculas:

div p{text-transform: capitialize}
div span{text-transform: lowercase}
    
    
//uppercase: transforma as letras em maiúsculas

text-align:Especifica o tipo de alinhamento horizontal do texto contido no elemento:

h1{text-align: center}

text-ident:Especifica o tamanho da identação (deslocamento para a direita) a ser inserido antes da primeira linha formatada do texto contido no elemento. Serve para especificar a distância do parágrafo:

p {text-indent: 15pt}
div {text-indent: 3em}

white-space:Especifica como os espaços em branco e as quebras de linha do texto serão tratados dentro do elemento:

p {white-space: normal}
div span{white-space: pre}
 	   
/* nowrap: os espaços em branco e quebras de linhas são agrupados em um único espaço, mas a mudança 
    de linha na área de exibição ocorre apenas com a utilização da tag <br> (HTML) ou <br /> (XHTML) */

Com essas propriedades de CSS, você tem total controle sobre a aparência dos textos em sua página. Seja alterando o estilo da fonte, ajustando o espaçamento, ou aplicando transformações, o CSS oferece uma ampla gama de ferramentas para garantir que o conteúdo textual do seu site seja atraente e fácil de ler.

Dúvidas ou sugestões sobre como formatar textos em CSS? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: formatar textos em css