Guida - CSS

Gli Id e le Classi sono strumenti che è possibile utilizzare in CSS (ma non solo), per poter identificare gli elementi all'interno della pagina, infatti in CSS è possibile modificare, per esempio, l'allineamento di un titolo fatto con il tag <h1> con il seguente codice:

 <h1 style="text-align:center;">Titolo esempio</h1> 

In questo caso tutti i titoli fatti con il tag <h1> verranno allineati al centro, ma supponiamo di avere più titoli fatti con questo tag all'interno della pagina, come facciamo ad allineare un solo <h1>? non è difficile, bisogna solo capire i concetti di Id e Class.
Innanzitutto è bene specificare che gli Id e le Classi non sono strutture opposte, anzi sono praticamente identici, l'unica differenza è che gli Id possono essere utilizzati su un singolo elemento, mentre le Classi possono essere usate più volte. Quindi riprendendo l'esempio precedente, con gli Id sarà possibile cambiare l'allineamento di un solo, <h1> mentre con le class quanti se ne vogliono. In pratica, gli Id e le Classi sono dei selettori, che a differenza dei normali elementi vengono preceduti da un punto "." (classi) o da un cancelletto "#" (id), successivamente vengono richiamati all'interno del codice HTML, nell'elemento a cui si vuole applicare lo stile, ecco un esempio pratico: Codice CSS: <pre><code> <h1>Primo Titolo</h1> <h1 class="titolo">Secondo Titolo</h1> <h1 class="titolo">Terzo Titolo</h1> <h1 class="titolo">Quarto Titolo</h1> <h1 id="sinistra">Quinto Titolo</h1> </code></pre> Come potete vedere nell'esempio sono stati dichiarati 3 selettori, uno riguarda i titoli <h1> in generale rendendoli centrali, la classe titolo invece fa in modo, che a tutti gli elementi a cui è assegnata quella classe, vengano allineati a destra, e come potete notare nel codice HTML, viene assegnata a più tag. Mentre l'id sinistra, consente l'allineamento a sinistra di un solo elemento, infatti nel codice HTML è stato usato solo una volta, nel quinto titolo. Ad uno stesso tag HTML, è possibile assegnare sia un id, sia una classe (ma mai due id o due classi), ma se prendiamo in considerazione l'esempio precedente, e assegniamo ad un tag <h1> sia la classe "titolo", sia l'id "sinistra", si verificherà che il titolo verrà allineato a sinistra, in quanto gli id hanno maggiore specificità rispetto alle Classi, ovvero vengono considerate più rilevanti, oppure è possibile utilizzare la keyword important! nel documento CSS, subito dopo la classe "titolo", in questo modo diventerà più rilevante.