Como mudar a cor de fundo de um texto com CSS

Publicado em 15/04/2020

Neste artigo vamos aprender como mudar a cor de fundo de um texto com CSS, para que você possa personalizar seus textos nos seus projetos HTML.

como mudar a cor de fundo do texto capa

Fala programador(a), tudo bem? Bora aprender coisa nova!

Podemos mudar diversas propriedades do texto, como a cor, tamanho da fonte e também a cor de fundo com CSS

Esta propriedade é chamada de background-color, e o valor que ela precisa é de uma cor

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

118 aulas
4 projetos
9h 33min

Que pode ser o nome da cor em inglês como blue ou um hexadecimal como #000000 (que representa a cor preta)

E então você terá o seu texto com a cor que deseja, vamos a um exemplo prático:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Como mudar a cor de fundo do texto</title>
</head>
<body>
    <p>Este parágrafo terá a cor de fundo alterada.</p>
</body>
</html>

Temos um HTML bem simples, como uma tag p

Vamos alterar a cor de fundo, background-color, deste elemento

Veja o CSS necessário:

p {
    background-color: blueviolet;
}

Veja como fica no navegador:

Assim atingimos nosso objetivo, agora podemos fazer outras melhorias para deixar o texto mais bonito

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Como mudar a fonte, dar uma espaçamento da borda para o texto, cor da fonte e etc, veja:

p {
    background-color: blueviolet;
    color: gold;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif
}

Veja como fica:

cor de fundo ex2

É de suma importância conhecer as propriedades do CSS, tanto para mudar a fonte como quisermos

Quanto para alterar os outros elementos, isso que dará senioridade a você como programador

Aqui no blog temos várias dicas em relação a isso, veja a categoria de CSS

Conclusão

Neste artigo vimos como mudar a cor de fundo de um texto com CSS

Fazemos isso alterado a propriedade background-color no elemento alvo

Esta propriedade serve também para qualquer elemento que possua uma cor de fundo

Vimos também outras possibilidades para alterar as fontes de texto, como color e font-family

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Escrito por | Matheus Battisti

Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Canal no YouTube LinkedIn