Selettori CSS, Classi e ID

Guida al CSS – Classi e ID

Abbiamo visto l’utilità di utilizzare il CSS nella creazione e progettazione di pagine web, per migliorare la grafica e lo stile, e dare un tocco di personalità a tutto il sito internet.

In questo articolo continueremo a studiare l’efficacia del CSS unito all’HTML per ottimizzare e rendere ancora più belle le nostre pagine attraverso l’utilizzo dei selettori Classe e ID.

A cosa servono i selettori?

Programmando un sito web da zero con l’HTML ed il CSS, molto spesso si avrà bisogno di creare blocchi, div e sezioni con le stesse caratteristiche e lo stesso stile.

Per far si che oggetti simili abbiano le stesse proprietà, è possibile utilizzare il vecchio “copia e incolla” delle regole di stile. Però, il problema di questa procedura è che ripeteremo più e più volte codici all’interno della pagina, creando molta confusione e una quantità elevata di testo, che porterà di conseguenza un aumento della dimensione (kilobyte) della pagina.

È qui che entrano in gioco i selettori di elementi (classi e ID).

Detta in maniera semplice, le classi servono a richiamare delle regole di stile CSS senza doverle riscrivere singolarmente per ogni tag. Sono come veri pacchetti che contengono istruzioni CSS e che possono essere inserite in modo semplice e rapido all’interno di una pagina HTML.

Esempio di classe CSS
Esempio di classe CSS

I selettori ID lavorano con lo stesso principio, ma possono essere richiamati solo una volta all’interno della pagina. Servono per identificare un singolo oggetto o blocco in modo univoco.

Come si crea un selettore Classe o ID?

Il metodo di creazione di questi selettori è molto semplice, basterà utilizzare la giusta sintassi nel campo style di una pagina HTML o in un foglio di stile dedicato. Ad esempio:

.classe {
}

#id {
}

Una classe viene preceduta da un punto “.” e un ID dal simbolo cancelletto “#“. Seguono le parentesi graffe con le istruzioni CSS all’interno.

.titoloSecondario { 
color:white;
background-color:black;
margin:auto;
padding: 12px;
}

#sidebar { 
font-size:20pt;
color:white;
background-color:red;
width: 300px;
height: 80px;
}

Come si usa una classe o ID?

Per richiamare una classe o un selettore ID all’interno di una pagina web in HTML, dovremo utilizzare l’attributo class=”” o id=”” e digitare il nome all’interno delle virgolette.

Restando nell’esempio precedente, un esempio di codice potrebbe essere:

<h2 class="titoloSecondario"> Titolo </h2>

<p class=""titoloSecondario"> Finto titolo con le stesse caratteristiche </p>

<div id="sidebar"> </div>

La configurazione dei selettori è molto semplice, è possibile apportare modifiche in qualsiasi elemento semplicemente andando ad editare le regole CSS precedentemente create, direttamente dal foglio di stile o dall’apposita sezione <style>.

Esempio di codice

Nei seguenti esempi possiamo notare quanto possa fare la differenza nell’ordine e nella pulizia del codice con l’utilizzo di un selettore rispetto ad una classica programmazione con attributo style=””:

Con:

<html>
 <head>
  	<style>
	.esempio {
	  font-size:20pt;
	  color:green;
	  background-color:red;
	  line-size:30px;
          height:60px;
          width:150px;
	}
	
	</style>
 </head>
 <body>

     <p class="esempio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida placerat vulputate. Nam auctor luctus quam eget tincidunt. Maecenas varius commodo felis at semper. Phasellus purus neque, sollicitudin in congue id, congue a massa. Ut pretium ut nulla et bibendum. Curabitur ut ullamcorper nibh
    </p>

     <p class="esempio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida placerat vulputate. Nam auctor luctus quam eget tincidunt. Maecenas varius commodo felis at semper. Phasellus purus neque, sollicitudin in congue id, congue a massa. Ut pretium ut nulla et bibendum. Curabitur ut ullamcorper nibh
     </p>

 </body>
<html>

Senza:

<html>
 <head>
 </head>
 <body>

     <p style="font-size:20pt;color:green; background-color:red; line-size:30px; height:60px; width:150px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida placerat vulputate. Nam auctor luctus quam eget tincidunt. Maecenas varius commodo felis at semper. Phasellus purus neque, sollicitudin in congue id, congue a massa. Ut pretium ut nulla et bibendum. Curabitur ut ullamcorper nibh
</p>
     <p style="font-size:20pt;color:green; background-color:red; line-size:30px; height:60px; width:150px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida placerat vulputate. Nam auctor luctus quam eget tincidunt. Maecenas varius commodo felis at semper. Phasellus purus neque, sollicitudin in congue id, congue a massa. Ut pretium ut nulla et bibendum. Curabitur ut ullamcorper nibh
</p>

 </body>
<html>

Continua con: Scrittura dei fogli di stile

Corso completo di HTML e CSS

Articoli Recenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA