Como Mudar a Cor do Texto em HTML

Embora você possa mudar a cor do texto usando a tag <font> no HTML, o HTML5 não permite mais o uso desse método. Em vez disso, você usará o CSS básico para definir a cor do texto em vários elementos da página, garantindo que seu site seja compatível com todos os navegadores possíveis.

Método 1

Método 1 de 2:

Usando o CSS

Baixe em PDF

1
Abra seu arquivo HTML. A melhor maneira de mudar a cor do seu texto é usando o CSS. O antigo atributo HTML <font> não pode mais ser usado no HTML5. O melhor método para definir o estilo dos seus elementos é usar o CSS.
- Ele também funcionará com folhas de estilo externas (arquivos CSS separados). Os exemplos abaixo são válidos para um arquivo HTML usando uma folha de estilo interna.
Você definirá os estilos dentro dessa tag se estiver usando uma folha de estilo interna.
3
Escreva <style> para criar uma folha de estilo interna. Quando a tag <style> estiver na tag <head>, o CSS dentro dela será aplicado a todos os elementos da página. Quando você terminar, o começo do seu arquivo HTML ficará parecido com o exemplo a seguir:^{[1]XFonte de pesquisa}
```
<!DOCTYPE html><html><head><style></style></head>
```
4
Digite o elemento cuja cor do texto você quer mudar. Você usará a seção <style> para definir a aparência dos diferentes elementos da página. Portanto, para mudar, por exemplo, o estilo de todo o texto da página, digite o seguinte:
```
<!DOCTYPE html><html><head><style>body {}</style></head>
```
5
Insira o atributo color: no seletor de elementos. Ele dirá à página que cor de texto usar para aquele elemento. Nesse exemplo, ele mudará a cor do texto de toda a página:
```
<!DOCTYPE html><html><head><style>body {color:}</style></head>
```
6
Defina uma cor para o texto. Isso pode ser feito de três maneiras: pelo nome da cor, pelo valor hexadecimal ou pelo valor RGB. Por exemplo, para a cor azul, você pode digitar blue, rgb(0, 0, 255) ou #0000FF.
```
<!DOCTYPE html><html><head><style>body {color: red;}</style></head>
```

How.com.vn Português: Step 7 Acrescente outros seletores para mudar a cor de vários elementos.

Você pode usar os diferentes seletores para alterar a cor do texto em diversas partes da página:

<!DOCTYPE html><html><head><style>body {color: red;}h1 {color: #00FF00;}p {color: rgb(0,0,255)}</style></head><body><h1>Este título será verde</h1><p>Este parágrafo será azul.</p>Este texto será vermelho.</body></html>

8
Defina uma classe CSS em vez de mudar um elemento. Você pode definir uma classe e aplicá-la a qualquer elemento que quiser ao longo da página para acrescentar instantaneamente o estilo dela. Por exemplo, no arquivo a seguir, a classe ".redtext" fará com que qualquer elemento ao qual ela seja aplicada fique com o texto vermelho:
```
<!DOCTYPE html><html><head><style>.redtext {color: red;}</style></head><body><h1 class="redtext">Este título ficará vermelho</h1><p>Este parágrafo ficará normal.</p><p class="redtext">Este parágrafo ficará vermelho.</p></body></html>
```
Publicidade

Método 2

Método 2 de 2:

Usando atributos de estilo na linha

Baixe em PDF

Você pode usar os atributos de estilo na linha para alterar o estilo de um elemento da página, o que pode ser útil para uma ou duas mudanças rápidas, mas não é recomendado para o uso em larga escala. Para alterações mais abrangentes, use o método anterior.^{[2]XFonte de pesquisa}
2
Encontre o elemento daquele arquivo que você deseja alterar. Você pode usar atributos de estilo na linha para mudar a cor do texto de qualquer um dos seus elementos. Por exemplo, se quiser alterar a cor do texto de um título específico, encontre-o no arquivo:
```
<!DOCTYPE html><html><body><h1>Este é o título que você deseja modificar</h1></body></html>
```
3
Acrescente o atributo "style" ao elemento. Digite style="" dentro da tag de abertura do elemento que você quer alterar:
```
<!DOCTYPE html><html><body><h1 style="">Este é o título que você deseja modificar</h1></body></html>
```

Step 4 Digite o atributo color: dentro do "".

Por exemplo:

<!DOCTYPE html><html><body><h1 style="color:">Este é o título que você deseja modificar</h1></body></html>

5
Escolha a cor desejada para o texto. Você pode expressar uma cor de três maneiras: digitando o nome dela, inserindo o valor RGB ou usando o valor hexadecimal. Por exemplo, para mudar a cor para amarelo, você pode digitar yellow;, rgb(255,255,0);, ou #FFFF00;:
```
<!DOCTYPE html><html><body><h1 style="color:#FFFF00;">Este título agora é amarelo</h1></body></html>
```
Publicidade