Selettore di classe

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

Il selettore di classe viene usato per selezionare gli elementi HTML in base al valore del loro attributo class. Ti consente di applicare gli stessi stili a più elementi nel documento. I selettori di classe sono particolarmente utili quando vuoi applicare lo stesso stile a un gruppo di elementi, indipendentemente dai nomi dei loro tag.

Per selezionare gli elementi con una classe specifica nel tuo CSS, usa un punto (.) seguito dal nome della classe. Ecco la sintassi di base per usare un selettore di classe:

.classname {
    property: value;
}

Per esempio:

.highlight {
    background-color: yellow;
    color: black;
}

In questo esempio, il selettore di classe .highlight seleziona tutti gli elementi con la classe "highlight". Le dichiarazioni impostano il colore di sfondo su giallo e il colore del testo su nero per questi elementi.

Sfida

Facile

Ti viene fornito un documento HTML con vari elementi, tra cui intestazioni (<h1>, <h2>), paragrafi (<p>) e divisioni (<div>). Alcuni di questi elementi hanno un attributo class. Il tuo compito è usare selettori di classe per applicare uno stile a questi elementi. Segui i passaggi riportati di seguito:

Aggiungi un attributo class con il valore "blue-text" all'elemento <h1> e al primo elemento <p>.
Aggiungi un attributo class con il valore "large-text" all'elemento <h2> e al secondo elemento <p>.
Scrivi una regola CSS usando un selettore di classe che selezioni tutti gli elementi con la classe "blue-text". Imposta il colore del testo di questi elementi su blu.
Scrivi una regola CSS usando un selettore di classe che selezioni tutti gli elementi con la classe "large-text". Imposta la dimensione del carattere di questi elementi su 24 pixel.

Provalo tu

<html>
<head>
    <title>Class Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>