Selettori CSS di Base

Per applicare gli stili, è necessario indicare a CSS quali elementi HTML devono essere selezionati. Questo viene fatto utilizzando i selettori. In questo capitolo ci concentriamo sui tre selettori più importanti: il selettore di tag, il selettore di classe e il selettore di id.

Selettore di tag

Un selettore di tag seleziona tutti gli elementi di uno specifico tag HTML.
Esempio HTML:

<p>It was all in my head.</p>

Esempio CSS:

p {
  color: purple;
  font-size: 36px;
  background-color: pink;
}

Questa regola si applica a ogni elemento <p> presente nella pagina.

Utilizzare i selettori di tag quando si desidera uno stile coerente per tutti gli elementi di quel tipo.

Selettore di Classe

Un selettore di classe individua gli elementi che condividono lo stesso nome di classe.
HTML:

<p class="text">This song is another hit.</p>

Nel CSS, si fa riferimento al nome della classe con un punto (.) per definire gli stili:

.text {
  color: red;
  font-size: 24px;
  background-color: wheat;
}

Solo gli elementi con class="text" ricevono questi stili.

I selettori di classe sono il tipo di selettore più utilizzato nei progetti reali perché consentono uno stile flessibile e riutilizzabile.

Classi Multiple

Un elemento può avere più di una classe.
HTML:

<p class="text font">We test multiple class names</p>

CSS:

.text {
  color: navy;
}

.font {
  font-size: 24px;
}

Se un elemento possiede entrambe le classi, riceve gli stili da entrambi i selettori.

Questo rende la stilizzazione basata sulle classi molto potente.

L'elemento <p> con entrambe le classi text e font riceve gli stili da entrambi i selettori. La classe text imposta il colore su navy, mentre la classe font imposta la dimensione del carattere a 24px.

Selettore ID

Un selettore ID individua un elemento unico.

Nell'HTML, aggiungere un attributo id a un elemento:

<p id="title">Choose from different themes.</p>

Nel CSS, fare riferimento all'ID con un cancelletto (#) per definire gli stili:

#title {
  font-weight: 500;
  font-size: 20px;
}

Gli ID devono essere unici all'interno di una pagina.

Sebbene gli ID possano essere utilizzati per la stilizzazione, le classi sono generalmente preferite per coerenza e riutilizzabilità.