CSS HTML

Como mudar a cor de fundo de um texto com CSS

15 de abril de 2020

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.

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

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:

cor de fundo ex1

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

Subscribe
Notify of
guest
2 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jefferson

Perfeito gostei muito, comecei fazer um curso de Html e css essa semana

Battisti

massa Jefferson, boa sorte no curso!

2
0
Would love your thoughts, please comment.x