CSS Font Color: Colorindo textos com CSS

A propriedade font-color serve exatamente para definir uma cor para um texto ou bloco de texto espec�fico ou geral.

Da mesma forma que podemos definir uma cor de texto para todo o site ou para todo o texto daquela determinada p�gina, podemos definir uma cor diferente para cada elemento de texto que esteja na p�gina.

Declaraç�o do CSS font color

As cores em css podem ser declaradas de tr�s maneiras:

Pelo nome em ingl�s(ex: red, blue, green, White)
Pelo c�digo hexadecimal(ex: #FFFFFF, #C74F7O, #0c7c21)
Pelos valores RGB(ex: rgb(255, 0, 0), rgb(100%, 0%, 0%))

Vamos tentar entender de uma maneira mais f�cil na pr�tica.

No exemplo abaixo vamos definir uma cor �nica para todo o texto da p�gina, vamos exibir as tr�s maneiras de se fazer isso.


<!DOCTYPE html>
<html>
<head>
	<title>Trabalhando com Cores em CSS</title>

	<style type="text/css">
	p{
		color: red;
		/* Poderia usar:;
		color: #ff0000;*/
		/* Poderia usar:;
		color: rgb(255, 0, 0);*/
	}
	</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at vulputate nisi. 
Nullam libero eros, porttitor aliquam purus sit amet, aliquet blandit sapien. 
Integer malesuada urna ut arcu eleifend, a auctor libero mattis. Cras nec purus dolor. 
Phasellus porta elit justo, a sodales nisl dictum quis. 
Quisque ante turpis, suscipit quis turpis a, pulvinar placerat leo. 
Maecenas posuere suscipit diam, eget molestie nulla dapibus sagittis. 
Quisque condimentum enim nulla, at interdum leo tincidunt sit amet. 
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
himenaeos.</p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
cubilia Curae; 
Mauris sed blandit augue, vel porttitor nisi. Sed et felis ac augue aliquam posuere. 
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
ridiculus mus. 
Vivamus non nulla in sapien tincidunt malesuada et vehicula orci. 
Pellentesque elementum eu purus molestie vehicula. 
Integer vitae nunc sed nibh ultricies tempor feugiat non lorem. 
Pellentesque varius lacus in enim tristique tincidunt. Curabitur vel luctus eros, 
ut lobortis enim. Vivamus vehicula, neque nec convallis ornare, erat nulla blandit est, 
non adipiscing mauris nisl et dui. 
Nullam a facilisis magna. Aliquam in justo augue. Cras vel egestas justo, 
eu semper metus.</p>

<p>Praesent sem enim, fringilla non justo ut, tristique tempor nulla. 
Suspendisse congue pulvinar orci, a luctus est sodales et. Nullam faucibus placerat elementum.
 Proin vehicula id lacus in ornare. Vivamus lacinia sit amet dui fringilla varius. 
Integer pulvinar justo at risus bibendum sollicitudin. Donec fermentum rhoncus tempus. 
Curabitur et imperdiet nulla, in luctus magna. Mauris gravida turpis id tristique volutpat.
 Etiam eget pretium sapien. Vestibulum auctor aliquam laoreet. 
Quisque gravida urna a nunc suscipit, et elementum est convallis.
 Sed sodales sapien eu quam euismod, quis ullamcorper massa malesuada.</p>
</body>
</html>

Listagem 1. Definindo cor de todo texto da p�gina

O c�digo acima vai colocar todos os par�grafos na cor vermelha, como mostra a figura 1.

Figura 1. Par�grafos da mesma cor

Agora j� sabemos como definir cores em textos usando CSS, mas e se quis�ssemos colocar cada par�grafo de cada cor?

Para isso ser poss�vel, vamos ter que usar o conceito de ID e/ou class para podermos estilizar um bloco de c�digo espec�fico, no nosso caso, cada par�grafo espec�fico.

Em primeiro lugar iremos definir uma class para cada tag <p> do nosso c�digo. Feito isso iremos estilizar cada classe dessa colocando a cor que quisermos usar.

Vejamos na pr�tica isso tudo funcionando:


<!DOCTYPE html>
<html>
<head>
	<title>Trabalhando com Cores em CSS</title>

	<style type="text/css">
	.paragrafo1{
		
		color: #ff0000;
		
	}
	.paragrafo2{
		
		color: #99ccff;
		
	}
	.paragrafo3{
		
		color: #0bf526;
		
	}
	</style>
</head>
<body>
<p class="paragrafo1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Cras at vulputate nisi. 
Nullam libero eros, porttitor aliquam purus sit amet, aliquet blandit sapien. 
Integer malesuada urna ut arcu eleifend, a auctor libero mattis. Cras nec purus dolor. 
Phasellus porta elit justo, a sodales nisl dictum quis. 
Quisque ante turpis, suscipit quis turpis a, pulvinar placerat leo. 
Maecenas posuere suscipit diam, eget molestie nulla dapibus sagittis. 
Quisque condimentum enim nulla, at interdum leo tincidunt sit amet. 
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
himenaeos</p>

<p class="paragrafo2">Vestibulum ante ipsum primis in faucibus orci luctus et 
ultrices posuere cubilia Curae; 
Mauris sed blandit augue, vel porttitor nisi. Sed et felis ac augue aliquam posuere. 
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
Vivamus non nulla in sapien tincidunt malesuada et vehicula orci. 
Pellentesque elementum eu purus molestie vehicula. 
Integer vitae nunc sed nibh ultricies tempor feugiat non lorem. 
Pellentesque varius lacus in enim tristique tincidunt. Curabitur vel luctus eros, 
ut lobortis enim.
 Vivamus vehicula, neque nec convallis ornare, erat nulla blandit est, non 
 adipiscing mauris nisl et dui. 
Nullam a facilisis magna. Aliquam in justo augue. Cras vel egestas justo, 
eu semper metus.</p>

<p class="paragrafo3">Praesent sem enim, fringilla non justo ut, 
tristique tempor nulla. 
Suspendisse congue pulvinar orci, a luctus est sodales et. 
Nullam faucibus placerat elementum.
 Proin vehicula id lacus in ornare. Vivamus lacinia sit 
 amet dui fringilla varius. 
Integer pulvinar justo at risus bibendum sollicitudin. 
Donec fermentum rhoncus tempus. 
Curabitur et imperdiet nulla, in luctus magna. Mauris gravida 
turpis id tristique volutpat.
 Etiam eget pretium sapien. Vestibulum auctor aliquam laoreet. 
Quisque gravida urna a nunc suscipit, et elementum est convallis.
 Sed sodales sapien eu quam euismod, quis ullamcorper 
 massa malesuada.</p>
</body>
</html>

Listagem 2. Aplicando cores diferentes em cada par�grafo

O resultado da listagem 2 pode ser vista abaixo na figura 2.

Figura 2. Cada par�grafo com uma cor diferente

Como podemos ver na imagem, cada par�grafo est� com uma cor diferente, devido ao uso da class e da estilizaç�o espec�fica.

A estilizaç�o pode ocorrer em qualquer elemento de texto, seja ele um par�grafo ou uma tag span, abaixo vamos ver um exemplo colocando apenas um trecho do texto com cor diferente usando a tag span.


<!DOCTYPE html>
<html>
<head>
	<title>Trabalhando com Cores em CSS</title>

	<style type="text/css">
	.paragrafo1{
		
		color: #ff0000;
		
	}
	.textoColorido{
		
		color: #99ccff;
		
	}
	
	</style>
</head>
<body>
<p class="paragrafo1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Cras at vulputate nisi.
 Nullam libero eros, porttitor aliquam purus sit amet, aliquet blandit sapien. 
<span class="textoColorido">Integer malesuada urna ut arcu eleifend, a 
auctor libero mattis. 
Cras nec purus dolor. Phasellus porta elit justo, a sodales nisl dictum quis. 
Quisque ante turpis, suscipit quis turpis a, pulvinar placerat leo.</span> 
Maecenas posuere suscipit diam, eget molestie nulla dapibus sagittis. 
Quisque condimentum enim nulla, at interdum leo tincidunt sit amet. 
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
inceptos himenaeos.</p>

</body>
</html>

Listagem 3. Colorindo uma parte do texto com tag span

O resultado pode ser visto abaixo na figura 3.

Figura 3. Colorindo tag span

Conclus�o

Nesse artigo vimos como trabalhar com a propriedade font-color e assim colorir todo o texto do site, par�grafos e/ou apenas partes do texto.

Caso tenham alguma d�vida podem ficar a vontade em me perguntar nos coment�rios, espero que tenham gostado e at� a pr�xima.

Saiba mais: Curso de Introduç�o ao CSS

CSS Font Color: Colorindo textos com CSS

Veja nesse artigo como trabalhar com a propriedade font-color em CSS e estilize seus textos com diferentes cores na mesma página.

Declaraç�o do CSS font color

Conclus�o

Artigos relacionados