Colori HEX

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 26 di 76.

I colori esadecimali sono un modo per specificare i colori usando valori esadecimali. Un codice colore esadecimale è un codice a sei cifre preceduto dal simbolo cancelletto (#) che rappresenta la quantità di luce rossa, verde e blu che compone un colore.

Ogni coppia di cifre nel codice rappresenta l’intensità di uno di questi colori primari, che va da 00 (nessuna intensità) a FF (intensità massima). I colori esadecimali offrono un’ampia gamma di opzioni cromatiche e sono ampiamente utilizzati nel web design.

Ecco la sintassi di base per usare i colori esadecimali in CSS:

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

Per esempio:

p {
    color: #FF0000; /* Rosso */
    background-color: #00FF00; /* Verde */
}

Puoi anche usare la notazione abbreviata per i colori esadecimali quando entrambe le cifre di ogni coppia sono uguali. Per esempio:

p {
    color: #F00; /* Rosso (equivalente a #FF0000) */
    background-color: #0F0; /* Verde (equivalente a #00FF00) */
}

Sfida

Facile

Ti viene fornito un documento HTML con due intestazioni (<h1> e <h2>) e un paragrafo (<p>). Il tuo compito è usare codici colore esadecimali per i colori di sfondo. Segui i passaggi seguenti:

Scrivi una regola CSS per l'elemento <h1>. Imposta il colore di sfondo su viola elettrico usando il colore esadecimale #BF00FF.
Scrivi una regola CSS per l'elemento <h2>. Imposta il colore di sfondo su verde neon usando #39FF14.
Scrivi una regola CSS per tutti gli elementi <p>. Imposta il colore di sfondo su grigio chiaro usando #D3D3D3.

Provalo tu

<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>