Introduzione ai selettori

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

In CSS, i selettori sono modelli usati per selezionare gli elementi HTML a cui vuoi applicare uno stile. Sono una parte fondamentale delle regole CSS, poiché determinano a quali elementi verranno applicati gli stili.

Esistono vari tipi di selettori, ognuno dei quali individua gli elementi in modi diversi. Comprendere i selettori è fondamentale per padroneggiare CSS e creare pagine web ben strutturate.

Ecco una regola CSS di base con un selettore:

selector {
    property: value;
}

selector: Seleziona gli elementi HTML a cui applicare lo stile.
property: L’attributo di stile che vuoi modificare (ad es., color, font-size).
value: Il valore che vuoi impostare per la proprietà (ad es., blue, 16px).

Per esempio:

p {
    color: blue;
    font-size: 16px;
}

In questo esempio, p è il selettore, che individua tutti gli elementi di paragrafo. Le dichiarazioni impostano il colore del testo su blu e la dimensione del carattere su 16 pixel per tutti i paragrafi.

Sfida

Facile

Ti viene fornito un documento HTML. Usa il CSS interno per applicare al documento le seguenti proprietà:

Imposta il colore di sfondo di tutte le intestazioni h1 su green.
Imposta il colore del testo di tutte le intestazioni h1 su white.
Imposta la dimensione del carattere di tutti i paragrafi (p) su 18px.

Ti viene fornito il codice CSS iniziale.

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
    <style>
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Web Developer</p>
</body>
</html>