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 permette di applicare gli stessi stili a più elementi nel tuo documento. I selettori di classe sono particolarmente utili quando vuoi applicare lo stesso stile a un gruppo di elementi, indipendentemente dai nomi dei tag.

Per selezionare elementi con una classe specifica nel tuo CSS, usi 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>). Nessuno di essi ha ancora una class: prima aggiungerai gli attributi class, poi applicherai uno stile agli elementi con i selettori di classe. Segui i passaggi seguenti:

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 su blu il colore del testo di questi elementi.
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 a 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>