Como mudar a cor de fundo de um texto com CSS

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.

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

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:

É 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