Como usar CSS para alterar a cor da fonte

Adicione um toque de cor aos seus designs da web com algum CSS para iluminar o seu texto.

Quer enfeitar seu site com algumas cores de fonte diferentes? Você pode fazer isso usando CSS. CSS significa Cascading Style Sheets e é a linguagem padrão usada para criar e gerenciar o estilo de qualquer site.

Existem três métodos de aplicação de CSS a um documento HTML. Estes são CSS embutido, CSS interno/incorporado e CSS externo.

Método um: CSS embutido

Para alterar a cor da fonte em CSS, você precisará criar uma regra CSS para definir o valor da propriedade color.

O método inline usa a propriedade style que você pode aplicar a praticamente qualquer elemento. Aqui está um exemplo que define a cor da fonte de um parágrafo HTML para vermelho:

<p style="color: red;">Paragraph of text</p>

Você pode obter o mesmo efeito usando CSS interno/incorporado ou CSS externo.

Método dois: CSS interno/embutido

Você pode usar esse método quando quiser criar regras CSS que afetem mais de uma instância de um elemento HTML, mas apenas em uma única página. As regras CSS são então escritas no cabeçalho da página HTML, usando um elemento de estilo:

<head>
    <style>
    p { color: blue }
    </style>
</head>

Método três: CSS externo

A terceira maneira de obter o mesmo efeito é usar uma folha de estilo CSS externa. Usando um editor de texto, crie um arquivo com a extensão “.css”. A prática comum é chamar esse arquivo de algo como stylesheet.css, mas você pode nomeá-lo como quiser, desde que mantenha a extensão ".css".

Para colorir o texto do corpo de verde, por exemplo, usando uma folha de estilo externa, basta colar a regra CSS assim:

p { color: blue }

Em seu documento HTML, você deve incluir um link para sua folha de estilo dentro do elemento HTML head:

<html>
<head>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <p>Paragraph of text</p>
</body>
</html>

Alterando a cor da fonte em HTML, sem aplicação de CSS

A prática recomendada é usar CSS, mas veja como alterar a cor da fonte usando apenas HTML:

<p><font color="red">Paragraph of text</font></p>

O elemento font, juntamente com seu atributo color, está obsoleto. Isso ocorre porque eles são elementos de apresentação e não estruturais. O HTML moderno deve consistir apenas em elementos estruturais.

Alterar a cor da fonte em CSS é relativamente simples

Mostramos três métodos para alterar a cor da fonte em CSS. Também mostramos como fazer isso da maneira antiga, usando a tag de fonte HTML. Experimente e veja qual funciona melhor para você!