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.
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.
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.
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.
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
Confira outros conteúdos:
Perguntas frequentes
Quem somos?
Por que a programação se tornou a profissão mais promissora da atualidade?
Como faço para começar a estudar?
Em quanto tempo de estudo vou me tornar um programador?
Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!
O que eu irei aprender estudando pela DevMedia?
Principais diferenciais da DevMedia
Qual o investimento financeiro que preciso fazer para me tornar um programador?
Como funciona a forma de pagamento da DevMedia?
Por
Ricardo
Em 2013
Nossos casos de sucesso
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa bagagem consegui um estágio logo no início do meu primeiro período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um passo a passo incrível. Só não aprende quem não quer. Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da programação, irei assinar meu contrato como programador graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na área.
