Per applicare gli stili in modo efficace, è necessario comprendere i selettori CSS, che determinano quali elementi HTML devono essere selezionati per la formattazione. Esploriamo i principali tipi di selettori.

Selettore di Tag

Un modo per applicare gli stili è utilizzare direttamente il tag dell'elemento. Gli stili specificati tramite un selettore di tag influenzeranno tutti gli elementi con quel tag. Questo è utile per applicare una formattazione coerente agli elementi su tutto il sito web.

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

Un metodo più preciso per stilizzare gli elementi consiste nell'utilizzare i selettori di classe. Questi selettori individuano gli elementi con nomi di classe specifici, permettendo di applicare gli stili in modo selettivo.

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 e osservare che solo gli elementi con la classe text riceveranno questi stili, offrendo un controllo più preciso sulla formattazione.

Tutti gli elementi con l'attributo class="text" sono stilizzati 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 combinare più classi su un singolo elemento, rendendo la composizione delle classi uno strumento potente per applicare gli stili: separare i nomi delle classi con spazi nell'attributo class.

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

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

Nel CSS, definire gli stili per ciascuna classe separatamente:

.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

Sebbene sia possibile utilizzare il selettore id per la formattazione, generalmente non è consigliato. Gli id devono essere unici in una pagina, limitandone il riutilizzo.

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 il funzionamento. Questo esempio applica gli stili all'elemento unico con 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 quell'elemento specifico.