Guia do artigo:
Introdução
Apesar de vivermos na era da comunicação em vídeo, o texto ainda é a forma mais básica e direta de comunicação em web sites. Nesta seção da documentação de CSS veremos como utilizar negritos, itálicos e sublinhados, alterar a fonte e aplicar efeitos sobre elementos de text. Você aprenderá também a definir o espaçamento entre as linhas e letras.
Ao longo desta seção usaremos diversas as propriedades que são apresentadas na prática no curso Introdução ao CSS na prática.
Color
A propriedade color altera a cor de primeiro plano de um texto, também chamada em algumas literaturas de foreground. Ao utilizar essa propriedade, todo o texto do elemento será alterado, assim como decorações que ele contenha, por exemplo sublinhados:
p { color: blue; }
No caso acima, todos os parágrafos na página terão a sua cor alterada para azul.
Font
Aplicamos uma fonte ao texto de um elemento com a propriedade font-family. Essa propriedade permite informar uma lista composta por uma ou mais fontes que, quando forem encontradas pelo navegador no computador do usuário do site, serão utilizadas. Usamos essa propriedade da seguinte forma:
p { font-family: arial; }
A fonte Arial, assim como Courier New, Georgia, Times New Roman, Trebuchet MS e Verdana são consideradas Web Safe. Uma vez que o criador do web site não possui total controle sobre as fontes instaladas no computador do usuário, frequentemente decidimos utilizar uma das fontes nesta lista por estarem disponíveis em grande parte dos sistemas operacionais.
No caso de a fonte escolhida pelo desenvolvedor não estar disponível no computador do usuário, o navegador pode decidir utilizar um fonte web safe em seu lugar. Nesse caso, para reduzir a disparidade entre a fonte selecionada e a que decidimos utilizar, podemos informar uma fonte genérica na declaração, como abaixo:
p { font-family: arial, sans-serif; }
Além de sans-serif, serif, monospace, cursive e fantasy também são exemplos de fontes genéricas que podemos utilizar como alternativa caso a fonte informada não seja encontrada no computador do usuário. Algumas literaturas também citam essas como famílias de fontes e indicam na ausência da fonte informada, no caso acima Arial, uma outra fonte da mesma família é utilizada em seu lugar.
Um outro recurso que podemos utilizar é informar mais de uma fonte para que se caso a primeira não seja encontrada, o navegador tente utilizar a próxima, como uma pilha de fontes:
p { font-family: "Trebuchet MS", Verdana, sans-serif; }
No exemplo acima, primeiro o navegador tentará aplicar Trebuchet MS, recorrendo a Verdana e sans-serif em caso de falha, nesta ordem.
A propriedade font-size altera o tamanho do texto. Podemos utilizar diferentes unidades para determinar esse tamanho, sendo px e em as mais comuns. No exemplo abaixo definimos em pixels qual será o tamanho da fonte:
p { font-size: 16px; }
Quando utilizamos em como unidade, o tamanho da fonte utilizada no elemento pai afeta o elemento filho. Vejamos um exemplo:
<p>Texto <span>em destaque</span> no parágrafo</p>
p { font-size: 16px; }
span { font-size: 2em; }
No exemplo acima, o parágrafo terá uma altura de 16px, enquanto o span terá 32px no final, pois na maioria dos navegadores 1em corresponde a 100% da fonte utilizada no elemento pai e assim por diante.
Com o CSS podemos ainda alterar o peso de um texto. As mais simples são itálico e negrito. Abaixo temos um exemplo onde aplicamos itálico ao parágrafo com a propriedade font-style e negrito ao span com a propriedade font-weight:
<p>Texto <span>em destaque</span> no parágrafo</p>
p { font-style: italic; }
span { font-weight: bold; }
A propriedade font-weight pode ainda receber os valores lighter e bolder dependendo do grau do peso que desejamos aplicar ao texto. Esse mesmo efeito pode ser obtido utilizando valores de 100 a 900, onde em 100 o texto possui traços mais finos que vão ficando mais pesados ao avançarmos até 900. Em 400, font-weight atribui a fonte seu traço padrão.
Transformações e Decorações
Com o CSS também podemos aplicar transformações ao texto utilizando para isso a propriedade text-transform. No trecho de código abaixo deixamos a primeira letra de cada palavra em maiúscula atribuindo a essa propriedade o valor capitalize:
p { text-transform: capitalize; }
Levando em consideração um parágrafo com o texto "Texto do parágrafo", o resultado do estilo acima aplicado será "Texto Do Parágrafo".
Outros valores utilizados com frequência para essa propriedade são listados a seguir:
- none: remove todas as transformações, o que é útil para anular algum estilo anteriormente aplicado pelo navegador;
- uppercase: deixa todas as letras em maiúscula;
- lowercase: deixa todas as letras em minúscula.
Outra propriedade muito utilizada para decorações é a text-decoration. Com ela podemos, por exemplo, remover o sublinhado de links, como pode ser visto abaixo:
a { text-decoration: none; }
Além do valor none, que remove qualquer transformação aplicada anteriormente, também podemos utilizar os seguintes:
- underline: aplica uma linha abaixo do texto;
- overline: aplica uma linha sobre o texto;
- line-through: risca o texto.
Sombras
Nos dias atuais é muito comum aplicarmos efeitos de sombra ao texto. Quando utilizadas corretamente, as sombras facilitam a leitura e destacam o texto de imagens ou qualquer outro elemento que seja utilizado como fundo.
A propriedade utilizada para esse fim é a text-shadow, que recebe quatro valores, conforme descrito abaixo:
p { text-shadow: 2px 4px 5px #eee; }
No exemplo acima, o primeiro valor corresponde a distância horizontal da sombra em relação ao texto no parágrafo e o segundo valor determina o deslocamento vertical. O terceiro valor indica o quanto desejamos que a sombra seja borrada, perdendo assim a sua solidez. Por último, definimos a cor da sombra, nesse caso cinza.
Também é possível aplicar múltiplas sombras ao texto com essa propriedade como visto abaixo:
p { text-shadow: 2px 4px 5px #eee, 0 0 1px red; }
Note que apenas o último valor, separado do anterior por uma vírgula, recebe um ponto e vírgula no final.
Alinhamento
A propriedade text-align permite controlar como o texto será alinhado dentro do elemento que o contém. Abaixo temos um exemplo de como utilizá-lo:
p { text-align: center; }
No exemplo acima, o parágrafo será alinhado no centro do elemento no qual estiver contido.
Outros valores que podem ser utilizados para essa propriedade são:
- left: justifica o texto a esquerda;
- right: justifica o texto a direita;
- justify: ajusta o espaço entre as palavras para que o texto ocupe todo o espaço disponível em uma linha.
Altura de linha e espaçamento
Podemos controlar a altura da linha de um texto com a propriedade line-height. Geralmente utilizamos a unidade em como valor para essa propriedade para que a distância entre as linhas do texto acompanhe o tamanho da fonte. Abaixo podemos ver um exemplo:
p { font-size: 14px; line-height: 1.6em; }
No exemplo acima, a fonte terá 14px de altura e a linha será 1.6 vezes esse valor.
Uma das razões para a utilização do line-height é facilitar ao usuário acompanhar as linhas em um texto conforme ele lê. Por exemplo, se o espaçamento entre as linhas for maior, será mais fácil para o leitor identificar em que linha está, sem se confundir quando for para a próxima linha.
Podemos ainda modificar a aparência de um texto com as propriedades letter-spacing e word-spacing, que permitem controlar o espaço entre as letras e palavras de um texto. Abaixo temos um exemplo de como utilizá-las:
p { letter-spacing: 2px; word-spacing: 4px; }
Essas propriedades podem ser úteis também para facilitar a legibilidade de uma fonte muito densa, o que pode fazer com que as letras fiquem muito próximas umas das outras.
