CSS - 2. Fontes de texto


Para estilizar um texto de HTML utilizando uma folha de estilos, veja o exemplo a seguir:

exemplo.html
<p>Este é um texto de exemplo</p>

Com o CSS, basta fazer o seguinte:

exemplo.css
p { font-family: Tahoma ; font-size: 32px; color: #009900 }

Veja a seguir a descrição de cada elemento:

font-family: Pode informar a fonte diretamente, mas se a fonte tiver espaço em branco no nome, precisará encapsular com aspas simples, como por exemplo 'Times New Roman'. Você também pode adicionar fontes adicionais, caso o computador do cliente que irá abrir o site não tenha a fonte Tahoma, como exemplo a seguir:

font-family: Tahoma, 'Times New Roman';

Sempre finalize com ponto e vírgula cada instrução, e podem ficar na mesma linha, ou em cada linha.

font-size: Define-se o tamanho, que pode ser em pixels usando o número seguido por 'px', ou outras medidas de unidade existentes como a 'em', que também é muito utilizada. Na realidade, existem vários tipos de notação de tamanho, mas para a Web, geralmente utiliza apenas estes dois elementos, mas existe uma diferença entre as duas: uma possui uma unidade absoluta de tamanho, e a outra é um tamanho referencial, sendo 1em igual ao tamanho especificado no HTML da página, ou seja, se o seu body possui um tamanho de fonte de 16px, e todas as fontes tiverem 1em, elas terão o mesmo tamanho. Veja mais em unidades de medida do CSS.

color: Define-se a cor da fonte. Temos aqui a opção com o jogo da velha e um código hexadecimal. O Hexa pode ser resumido contendo 3 ou 6 caracteres, e aceita-se apenas valores entre 0 e F (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Caso a cor que queira inserir seja #cccccc (cinza), pode resumir com #ccc, ou #000000 (preto) com #000. Veja mais em espaço de cores do CSS.

Comentários