CSS: formatação de texto

(Elivelto Ebermam)

 

No CSS podemos definir várias características dos textos, como fonte, tamanho da letra, cor da letra, entre outros. Para isso usamos as propriedades do CSS:

 

Propriedade font-family

A fonte é basicamente o tipo da letra que será utilizada. No CSS as fontes podem ser divididas em cinco grupos (esses grupos também são chamados de fontes genéricas):

Grupo (ou fonte genérica)	Exemplos de fontes pertencentes ao grupo
serif	Times New Roman Georgia
sans-serif	Arial Verdana Heveltica
monospace	Courier Courier New
cursive	Comic Sans Comic Sans MS
fantasy	Impact Luminari

 

Para definirmos uma regra para um elemento, um parágrafo por exemplo, usamos a propriedade font-family:

 

    p {

        font-family : Arial;    

      }

 

Nessa regra, definimos que os parágrafos terão fonte Arial. Entretanto, o navegador pode não reconhecer a fonte especificada. Por isso é recomendado informar mais de uma fonte para o valor de font-family:

 

    p {

        font-family : Arial, Verdana, sans-serif;    

      }

 

No exemplo, o navegador tentará usar a fonte Arial para os parágrafos, se não reconhecer, ele tentará usar a fonte Verdana. Por último, especificamos a fonte genérica sans-serif, pois se as duas primeiras fontes não estiverem disponíveis, o navegador utilizará uma fonte do tipo sans-serif que ele suporta.

Veja um exemplo na prática:

 

Nesse exemplo a regra é aplicada ao título de nível 1.

Propriedade font-size

Outro fator que pode ser modificado é o tamanho da letra. Para isso utilizamos a propriedade font-size. Podemos usar o valor em pixels, que é um valor absoluto. O valor deve ser expressado por um número seguindo pela palavra px, veja:

 

    p {

        font-size : 10px;    

      }

 

Nessa regra, a fonte do parágrafo terá tamanho de 10 pixels. É importante notar que não deve haver espaço entre o valor (10) e a palavra px.

Outra forma de definir o tamanho da letra é usar a medida “em”. Essa é uma medida relativa que, por padrão equivale a 16px . Assim, se quisermos uma fonte com 40px, temos que dividir esse valor por 16: 40 / 16 = 2.5em.

Veja a regra:

 

    p {

        font-size : 2.5em;    

      }

 

Agora vamos aplicar essas regras na prática:

 

Propriedade font-weight

Essa propriedade define a intensidade da fonte. Um dos seus principais usos é aplicar o efeito negrito. Para isso, devemos definir o valor “bold” para a propriedade:

    p {

        font-weight : bold;    

      }

 

Veja um exemplo:

 

Propriedade font-style

A propriedade font-style é usada produzir o efeito itálico no texto. Isso é feito usando o valor italic ou oblique para a propriedade. O resultado de ambos é semelhante.

 

    p {

        font-style : italic;    

      }

 

    h1 {

        font-style : oblique;    

      }

 

Veja um exemplo:

 

Propriedade text-align

A propriedade text-align define o alinhamento do texto. A tabela abaixo mostra os valores que essa propriedade pode ter:

Valor	Descrição	Exemplo de regra CSS
left	Alinhamento à esquerda	p { text-align : left; }
right	Alinhamento à direita	p { text-align : right; }
center	Centralizado	p { text-align : center; }
justify	Justificado	p { text-align : justify; }

 

O efeito dessa propriedade sobre o texto é o mesmo que em editores de textos, como o Word por exemplo. Assim se aplicarmos o alinhamento centralizado a um título, ele ficará no meio da página. Veja um exemplo:

 

 

Propriedade text-transform

A propriedade text-transform é responsável pelos efeitos conhecidos como caixa alta e caixa baixa. Veja os valores dessa propriedade:

Valor	Descrição	Exemplo de regra CSS
uppercase	Transforma todas as letras em maiúsculas.	p { text-transform : uppercase; }
lowercase	Transforma todas as letras em minúsculas.	p { text-transform : lowercase; }
capitalize	Transforma a primeira letra de cada palavra em maiúscula.	p { text-transform : capitalize; }

 

Assim, se aplicarmos uma regra com essa propriedade tendo o valor uppercase para um parágrafo, todas a letras desse parágrafo ficarão maiúsculas, mesmo que tenham sido escritas minúsculas. Veja um exemplo: