Selettori di base in CSS

1. Selettori per tipo (Type Selectors)

I selettori in CSS ti permettono di selezionare elementi HTML e applicare stili a essi. Conoscere i selettori di base ti aiuta a scegliere gli elementi sulla pagina in modo efficiente e preciso, rendendo il CSS uno strumento potente per stilizzare i contenuti web. In questo articolo vedremo i tipi principali di selettori: selettori per tipo (Type Selectors), selettori per classe, selettori per ID, selettori di gruppo e selettori universali.

I selettori per tipo selezionano tutti gli elementi di un determinato tag. Ad esempio, se vogliamo applicare stili a tutti i paragrafi nella pagina, usiamo il selettore per tipo con il tag <p>.

p {
  color: blue;
  font-size: 16px;
}

<p>Questo testo sarà blu e con una dimensione di 16 pixel.</p>
<p>Secondo paragrafo con gli stessi stili.</p>

I selettori per tipo sono utili quando devi applicare stili a tutti gli elementi di un determinato tipo, ad esempio a tutti i titoli o paragrafi. Offrono un controllo generale sull'aspetto di un gruppo di elementi e semplificano la manutenzione del sito.

2. Selettori per classe (Class Selectors)

I selettori per classe ti permettono di selezionare elementi con un determinato valore dell'attributo class. Una classe è indicata dal punto (.) davanti al nome della classe. Una stessa classe può essere usata da più elementi, permettendoti di applicare stili identici a più elementi.

.highlight {
  background-color: yellow;
  color: blue;
  font-weight: bold;
}

<p class="highlight">Questo testo è evidenziato in blu su sfondo giallo.</p>
<p>Testo normale senza classe.</p>
<div class="highlight">Anche questo blocco sarà stilizzato con la classe highlight.</div>

I selettori per classe sono versatili e pratici, poiché consentono di creare stili che possono essere applicati a diversi elementi. Le classi sono particolarmente utili quando devi stilizzare un gruppo di elementi non correlati.

3. Selettori per ID (ID Selectors)

I selettori per ID selezionano elementi con un determinato valore dell'attributo id. Un ID è indicato dal simbolo # davanti al nome. A differenza delle classi, un ID deve essere unico nella pagina, rendendolo ideale per stilizzare elementi unici, come un titolo o una barra di navigazione.

#main-header {
  font-size: 24px;
  color: green;
  text-align: center;
}

<h1 id="main-header">Titolo della pagina</h1>
<p>Questo paragrafo non verrà influenzato dal selettore per ID.</p>

I selettori per ID applicano uno stile solo a un elemento nella pagina, motivo per cui sono utilizzati per evidenziare elementi unici con stili specifici.

4. Selettori di gruppo (Group Selectors)

I selettori di gruppo ti permettono di applicare gli stessi stili a più elementi contemporaneamente. Questo si fa usando una virgola, che unisce diversi selettori in una regola CSS. I selettori di gruppo semplificano il codice, consentendoti di definire stili comuni per più tipi di elementi.

h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

<h1>Titolo di primo livello</h1>
<h2>Titolo di secondo livello</h2>
<h3>Titolo di terzo livello</h3>
<p>Questo testo non verrà influenzato dal selettore di gruppo.</p>

I selettori di gruppo aiutano a ridurre il codice CSS e semplificano la stilizzazione, specialmente quando devi applicare le stesse proprietà a elementi diversi, ad esempio ai titoli di diversi livelli.

5. Selettori universali (Universal Selectors)

Il selettore universale è rappresentato dall'asterisco (*) e seleziona tutti gli elementi nella pagina. È uno strumento potente che ti permette di impostare stili di base per tutti gli elementi, ad esempio per uniformare i margini o definire un font standard. Il selettore universale è utile per il reset dei stili, quando vuoi rimuovere i margini e i padding predefiniti del browser per un controllo più preciso sui tuoi stili.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<h1>Titolo</h1>
<p>Paragrafo di testo con margini e padding azzerati.</p>
<div>Contenitore con margini e padding azzerati.</div>

In questo esempio, il selettore universale azzera i margini e i padding per tutti gli elementi, aiutandoti a mantenere la consistenza degli stili nella pagina. Questo approccio è spesso utilizzato all'inizio del codice CSS per creare una stilizzazione uniforme.