Cores HEX

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 26 de 76.

As cores HEX são uma forma de especificar cores usando valores hexadecimais. Um código de cor hexadecimal é um código de seis dígitos precedido por um símbolo de cerquilha (#) que representa a quantidade de luz vermelha, verde e azul que compõe uma cor.

Cada par de dígitos no código representa a intensidade de uma dessas cores primárias, variando de 00 (nenhuma intensidade) a FF (intensidade total). As cores hexadecimais oferecem uma ampla variedade de opções de cores e são amplamente usadas no design web.

Aqui está a sintaxe básica para usar cores hexadecimais em CSS:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Por exemplo:

p {
    color: #FF0000; /* Red */
    background-color: #00FF00; /* Green */
}

Você também pode usar a notação abreviada para cores hexadecimais quando os dois dígitos de cada par são iguais. Por exemplo:

p {
    color: #F00; /* Red (equivalent to #FF0000) */
    background-color: #0F0; /* Green (equivalent to #00FF00) */
}

Desafio

Fácil

Você recebeu um documento HTML com dois títulos (<h1> e <h2>) e um parágrafo (<p>). Sua tarefa é usar códigos de cores hexadecimais para cores de fundo. Siga as etapas abaixo:

Escreva uma regra CSS para o elemento <h1>. Defina a cor de fundo como roxo elétrico usando a cor hexadecimal #BF00FF.
Escreva uma regra CSS para o elemento <h2>. Defina a cor de fundo como verde neon usando #39FF14.
Escreva uma regra CSS para todos os elementos <p>. Defina a cor de fundo como cinza-claro usando #D3D3D3.

Experimente você mesmo

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>