Nessa aula vamos ver algumas propriedades que usamos para personalizar textos no CSS.

Sabemos que boa parte dos conteúdos das páginas HTML é formada de textos. Então vamos conhecer agora algumas propriedades do CSS que podemos usar e modificar a aparências dos nossos textos.

Color

A propriedade color é usada para atribuir uma cor para o texto. O valor de “color” pode ser apenas o nome da cor em inglês, ou o mais indicado que é o valor hexadecimal da cor.

Mais a frente vamos entender como funciona o hexadecimal, mas para essa aula vamos usar o simples exemplo de personalização de cor:

Nesse exemplo aplicamos a cor de texto preta no elemento cuja classe se chama “paragrafo”.

Text-align

Essa propriedade é utilizada para informar como o seu texto deve ser alinhado. Os principais valores são: center, left e right. O primeiro valor alinha o texto ao centro, o segundo para a esquerda e o terceiro a direita. Veja os exemplos abaixo:

Text-decoration

Essa propriedade é usada basicamente para 3 coisas: Colocar uma linha abaixo do texto (sublinhado), uma linha acima do texto ou uma linha cortando o texto.

Os valores mais comumente usados nessa propriedade são: Underline, overline e line-through. Veja exemplos:

Os valores acima podem ser vistos dessa forma:

Parágrafo 1

Este é o parágrafo 2

Aqui o parágrafo 3

Font-size

Propriedade responsável por modificar o tamanho dos seus textos. A unidade de medida mais comumente usada é pixel (px). Um exemplo de uso:

Line-height

A propriedade line-height vai informar o quanto de altura cada linha de seu texto vai ocupar. Naturalmente, os textos ocupam a altura normal do tamanho da sua fonte.

Em alguns casos precisamos deixar as linhas do texto mais afastadas uma da outra, para isso podemos aumentar a altura no qual cada linha ocupa. Exemplo:

Nesse caso mesmo que o texto tenha 12px de tamanho, a linha vai ocupar 30px (18 px a mais que o natural), causando um afastamento entre as linhas:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Font-family

Essa propriedade é usada para informar qual fonte deseja usar em seus textos. Não somente você escolhe a fonte, como também dá uma lista de fontes para que, caso o navegador não possa utilizar a primeira opção, ele parte pra segunda, e assim sucessivamente.

Exemplo:

Nesse caso o navegador verifica se é possível utilizar a fonte Arial, caso o usuário não tenha a fonte instalada no seu computador, ele tenta usar a segunda opção. Caso não encontre também a segunda parte pra terceira.

A terceira opção geralmente usamos uma fonte genérica, então caso o navegador não encontre as 2 primeiras opções ele busca qualquer fonte que se enquadre nesse caso como “sans-serif”.

O terceiro valor poderia ser também “serif”. Mas o que isso significa? Fontes sem serifas ou sans-serif são aquelas mais retas, lisas, sem aquelas “pontas” nas extremidades.

Sem serifa

Já as fontes com serifa ou serif possuem saliências, detalhes nas extremidades dos caracteres deixando o texto aparentemente mais clássico.

Com serifa

Font-weight

Essa propriedade modifica a intensidade da fonte, o peso dela visualmente. Quando queremos por exemplo deixar o texto em negrito, utilizamos o valor: font-weight: bold;

Os valores mais comuns dessa propriedade são: Normal e bold;

Agora que já aprendemos a personalizar textos no CSS, vamos partir para a próxima: