Per applicare gli stili in modo efficace, è fondamentale comprendere i selettori CSS, che determinano quali elementi HTML verranno selezionati per la formattazione. Esaminiamo i principali tipi di selettori.

Selettore di Tag

Un selettore di tag seleziona tutti gli elementi di un determinato tag, applicando uno stile uniforme in tutta la pagina.

Sintassi: Nell'HTML, abbiamo un elemento p:

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

Per applicare gli stili nel file CSS, utilizzare il nome del tag (p) come selettore:

p {
  property: value;
}

Eseguiamo il seguente esempio e verifichiamo come funziona.

Selettore di Classe

I selettori di classe individuano gli elementi che condividono un nome di classe, offrendo un controllo più preciso.

Sintassi: Nell'HTML, aggiungere un attributo class con un nome di classe significativo:

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

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

.text {
  property: value;
}

Eseguire il seguente esempio per osservare che solo gli elementi con la classe text riceveranno questi stili, consentendo un controllo più dettagliato sulla formattazione.

Tutti gli elementi con l'attributo class="text" sono formattati con testo rosso, dimensione del carattere di 24px e sfondo color grano. Il nome della classe text è definito in index.css utilizzando il prefisso ..

Composizione delle classi

È possibile assegnare più classi a un singolo elemento per una maggiore flessibilità nello stile.

Sintassi: Nell'HTML, aggiungere più nomi di classe a un elemento:

<p class="text font">A robot created chemicals.</p>

Nel CSS, definire separatamente gli stili per ciascuna classe:

.text {
  property: value;
}

.font {
  property: value;
}

Eseguiamo il seguente esempio per vedere come funziona. Gli elementi con entrambe le classi text e font riceveranno gli stili specificati.

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

I selettori Id individuano un singolo elemento univoco. Poiché gli Id devono essere unici, questo metodo è raramente utilizzato per la formattazione.

Sintassi: 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 {
  property: value;
}

Eseguire il seguente esempio e osservare come funziona. Questo esempio applica gli stili all'elemento univoco con l'id title.

L'attributo id="title" identifica in modo univoco l'elemento <p>, e gli stili definiti con il selettore #title si applicano solo a quello specifico elemento.