Colore di sfondo

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

In CSS, la proprietà background-color viene usata per impostare il colore di sfondo di un elemento HTML. Questa proprietà ti permette di specificare un valore di colore.

Ecco la sintassi di base per usare la proprietà background-color:

selector {
    background-color: color-value;
}

Ecco alcuni modi comuni per specificare i valori dei colori in CSS:

Colori con nome: Nomi di colori predefiniti, come red, blue, green, black, white, ecc.

Valori esadecimali: Codici colore a sei cifre preceduti dal simbolo cancelletto (#), come #FF0000 per il rosso.

Valori RGB: Specifica le componenti rosse, verdi e blu di un colore usando la funzione rgb(), con valori compresi tra 0 e 255, come rgb(255, 0, 0) per il rosso.

Per esempio:

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

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

In questo esempio, il colore di sfondo dell'elemento <body> è impostato su lightblue, tutte le intestazioni <h1> hanno uno sfondo rosso (#FF0000) e tutti gli elementi <p> (paragrafo) hanno uno sfondo blu (rgb(0, 0, 255)).

Sfida

Facile

Ti viene fornito un documento HTML con un'intestazione (<h1>), un paragrafo (<p>) e un elemento div (<div>). Il tuo compito è usare la proprietà background-color per definire lo stile di questi elementi. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l'elemento <h1>. Imposta background-color su yellow.
Scrivi una regola CSS che selezioni l'elemento <p>. Imposta background-color su #00FF00 (verde).
Scrivi una regola CSS che selezioni l'elemento <div>. Imposta background-color su rgb(255, 0, 255) (magenta).

Provalo tu

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