Guia para formatar texto em CSS

Ao projetar um site, a formatação do texto é um aspecto importante da criação de uma interface atraente e legível.

CSS fornece várias propriedades que permitem personalizar vários elementos de texto, incluindo cor da fonte, tamanho, família, alinhamento, espaçamento e muito mais.

Abaixo está um guia detalhado sobre cada propriedade de formatação de texto, juntamente com exemplos para cada propriedade.

 

Cor da fonte

Parâmetro: Um valor de cor, que pode ser um nome de cor(por exemplo, red), código hexadecimal(por exemplo, "#FF0000"), valor RGB(por exemplo, "rgb(255, 0, 0)") ou valor RGBA(por exemplo, "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Tamanho da fonte

Parâmetro: Um valor de tamanho, que pode ser em pixels(por exemplo, "16px"), em unidades(por exemplo, "1em"), unidades rem(por exemplo, "1.2rem"), unidades de largura da janela de visualização(por exemplo, "10vw"), unidades de altura da viewport(por exemplo, "5vh") ou outras unidades.

h1 {  
  font-size: 24px;  
}  

 

Família de fontes

Parâmetro: Uma lista de família de fontes, especificada na ordem preferencial. Você pode especificar o nome da fonte(por exemplo, Arial) ou incluir nomes de fontes contendo caracteres especiais entre aspas duplas(por exemplo, " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

Peso e estilo da fonte

Parâmetro font-weight: normal(default), bold, bolder, lighter, ou valores numéricos de 100 a 900.

Parâmetro font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

Decoração de texto

Parâmetro: "none"(default), "underline", "overline", "line-through"  ou uma combinação de valores separados por espaços.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

Alinhamento de texto

Parâmetro: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

Altura da Linha e Margens

Altura da linha do parâmetro: um valor numérico ou uma porcentagem do tamanho da fonte atual.

Margem de parâmetro: Um valor de medição, como pixels(px), unidades em(em), unidades rem(rem) etc.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

Esquema de Texto com Várias Colunas

Parâmetro: Um inteiro positivo ou "auto"(default).

.container {  
  column-count: 2;  
}  

 

Alteração da cor do texto ao passar o mouse

Nenhum parâmetro específico, use apenas a pseudo-classe :hover.

a:hover {  
  color: red;  
}  

 

Alteração da cor do texto no estado(ativo, visitado)

Nenhum parâmetro específico, use apenas as pseudo-classes :active  e :visited.

a:visited {  
  color: purple;  
}  

 

Esperamos que as explicações e os exemplos acima tenham ajudado você a entender como usar e personalizar as propriedades de formatação de texto em CSS para criar uma interface de texto atraente e envolvente em seu site.