Cor de Fundo

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 25 de 76.

No CSS, a propriedade background-color é usada para definir a cor de fundo de um elemento HTML. Esta propriedade permite que você especifique um valor de cor.

Aqui está a sintaxe básica para usar a propriedade background-color:

selector {
    background-color: color-value;
}

Aqui estão algumas formas comuns de especificar valores de cores em CSS:

Cores nomeadas: Nomes de cores predefinidos, como red, blue, green, black, white, etc.

Valores hexadecimais: Códigos de cor de seis dígitos precedidos por um símbolo de cerquilha (#), como #FF0000 para vermelho.

Valores RGB: Especifica os componentes vermelho, verde e azul de uma cor usando a função rgb(), com valores variando de 0 a 255, como rgb(255, 0, 0) para vermelho.

Por exemplo:

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

Neste exemplo, a cor de fundo do elemento <body> é definida como lightblue, todos os títulos <h1> têm um fundo vermelho (#FF0000), todos os elementos <p> (parágrafo) têm um fundo azul (rgb(0, 0, 255)).

Desafio

Fácil

Você recebeu um documento HTML com um título (<h1>), um parágrafo (<p>) e uma divisão (<div>). Sua tarefa é usar a propriedade background-color para estilizar esses elementos. Siga os passos abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <h1>. Defina o background-color como yellow.
Escreva uma regra CSS que tenha como alvo o elemento <p>. Defina o background-color como #00FF00 (verde).
Escreva uma regra CSS que tenha como alvo o elemento <div>. Defina o background-color como rgb(255, 0, 255) (magenta).

Folha de consulta

A propriedade background-color define a cor de fundo de um elemento HTML:

selector {
    background-color: color-value;
}

Os valores de cor podem ser especificados usando:

Cores nomeadas: red, blue, green, black, white
Valores hexadecimais: #FF0000 (vermelho)
Valores RGB: rgb(255, 0, 0) (vermelho)

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

Experimente você mesmo

<html>
<head>
    <title>Background Color</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>