Adesso che ti è chiaro che cos’ è e a che cosa serve il linguaggio CSS, e persino come inserirlo nel tuo codice, non ci resta che entrare nel vivo della questione!
Come scrivere linguaggio CSS: la sintassi CSS
Abbiamo appurato che il CSS è un linguaggio di stile: come suggerisce la parola stessa, abbiamo, quindi, a che fare con una vera e propria lingua, ovvero un codice comunicativo che ti consentirà di parlare alla tua macchina. Prova a pensare alla lingua italiana: è composta da regole grammaticali; come qualsiasi linguaggio, dunque, il CSS sarà composto da delle regole. Quando parliamo delle regole di scrittura di un linguaggio in programmazione, ci riferiamo alla sua sintassi. Esploriamola!
Una regola CSS si compone in due parti: selettore (la parte a cui vogliamo applicare la regola css) e una o più dichiarazioni (ovvero delle coppie formate da una proprietà css e un valore, che devono terminare con un punto e virgola.)
selettore {
proprietà: valore;
}
I selettori CSS
I selettori CSS ci permettono di selezionare l’elemento o gli elementi a cui vogliamo applicare lo stile.
Sono diversi e hanno diverso peso, una diversa importanza, una diversa – in gergo – “specificità”: non preoccuparti se non afferri subito questo concetto, verrà sviscerato nelle prossime guide. Preoccupiamoci, invece, di andare a conoscere i nostri selettori più da vicino!
Selettore universale
* {
font-family: Arial, Helvetica, sans-serif;
}
Il selettore universale seleziona qualunque elemento sulla pagina e, infatti, viene usato pochissimo poiché molto debole come selettore: ha una specificità che equivale a zero. Questo significa che viene sovrascritto da qualsiasi altro selettore.
Si indica con un asterisco ed è, tuttavia, molto utile quando abbiamo necessità, per esempio, di definire il font globale della nostra pagina html.
Selettore tag HTML : element type
p {
color: red;
}
Questo selettore seleziona tutti gli elementi che hanno il tag name indicato. In questo specifico caso tutti i tag <p> della tua pagina HTML avranno un colore rosso.
Ma se, ad esempio, ci fosse stato al posto di “p” un “h2” tutti i tag <h2> della tua pagina avrebbero avuto quel colore.
Selettore Classe
.myClass {
color: orange;
font-size: 20px;
}
Con questo selettore possiamo selezionare ogni elemento HTML con un attributo “class” specifico.
Come funziona?
Vediamo prima la sintassi in CSS:
prima di tutto, occorre specificare che sarai tu a stabilire il nome della tua classe, ma il nostro suggerimento è di fare in modo che queste siano quanto più parlanti possibile. Cosa significa?
Supponi di voler dare a più elementi del tuo foglio html il colore grigio: quello che farai sarà chiamare la tua classe “color-gray”; è in questo senso che definiamo la classe parlante, perché letteralmente ci racconta quale sarà la sua funzione.
Questa è una best-practice estremamente utile, poiché qualora tu dovessi lavorare in team ti troverai nella situazione in cui più persone lavoreranno sul tuo stesso codice ed è, quindi, fondamentale che questo sia comprensibile anche ad altri professionisti.
Nel foglio html ti basterà inserire un attributo “class” nel tag che ti interessa ed indicare come valore di quest’ultimo le classi che preferisci.
Usiamo il plurale non a caso: puoi, infatti, utilizzare più di una classe per uno stesso elemento! Ti basterà scriverle una di fianco all’ altra come valori del tuo attributo “class”, come in questo esempio:
<p class="text-red font-lg"> Esempio </p>
NB. Quel “class” serve proprio a classificare, in questo specifico caso, questo tag p come text-red e font-lg. Ancora una volta il nome si spiega da sè: il class definisce una classificazione!
All’interno del foglio CSS dovrai, invece, inserire il nome della classe preceduto da un punto e inserire, come dichiarazione, tutte le proprietà che vuoi modificare.
Esempio:
.text-red {
color: red;
}
.font-lg {
font-size: large;
}
Qual è la forza di una classe? Poco fa hai creato la tua classe .color-gray; puoi dare questa classe a tutti gli elementi che devono, secondo te, avere il colore grigio, invece di utilizzare un selettore generico come quello per tag o troppo specifico come quello per id – che vedremo a breve – e scrivere molto codice in meno.
Selettore ID
#titolo {
color: red;
}
ID : questo selettore è identificativo di un SINGOLO elemento. Dunque, ne seleziona solo uno. Per semplificare il concetto, è come se l’ ID fosse una carta d’identità: ne esiste una sola per elemento.
L’ ID è presente nella nostra pagina html come valore dell’ attributo “ID” di un tag, che andremo poi a richiamare nel nostro foglio CSS utilizzando il simbolo “#” per usarlo come selettore.
Nel foglio html ci possono essere più id ma tutti diversi, mai due uguali.
Proviamo a rifarci all’ esempio di prima, in cui tutti i paragrafi del nostro codice assumevano colore rosso. Se volessimo, ad esempio, dare ad uno solo di loro il colore blu, idealmente potremmo assegnare all’ attributo ID del tag html di quello specifico paragrafo il valore “blueP” e utilizzarlo come selettore nel nostro css nella maniera sottostante:
nell html vedremmo
<p id=”blueP”> Esempio </p>
e nel CSS vedremmo
#blueP {
color: blue;
}
A questo punto, il paragrafo a cui abbiamo assegnato l’ ID “blueP” diventerà di colore blu.
Occhio! Anche per il nome del valore che vorrai dare all’attributo ID vale la stessa regola delle classi: è sempre meglio che sia parlante!
Ma il mondo dei selettori non finisce qui di stupire!
Possiamo, infatti, concatenare più selettori.
Osserva l’esempio sottostante:
p.text-red {
color: red;
font-size: 15px;
}
Come vedi abbiamo utilizzato come selettore “p.text-red”. Stiamo indicando, in questo modo, che esclusivamente i paragrafi che hanno la classe text-red avranno determinate caratteristiche, tutti gli altri elementi che abbiano solo la classe text-red, invece, no.
Oltre questa modalità, ne abbiamo diverse altre per concatenare i selettori:
Selettore dei discendenti (descendant selector)
#contactForm input {
font-size: 32px;
}
Il selettore dei discendenti ti permette di selezionare un elemento che è discendente da un altro.
Nell’ esempio sottostante potrai facilmente notare una cosa: tra il nostro selettore ID e il selettore per tag input c’è uno spazio vuoto: quello spazio va parafrasato come se ci fosse scritto “all’interno”.
Quindi, leggeremo questa regola CSS così:
“Tutti gli input all’interno del tag con ID “contactForm” dovranno avere queste caratteristiche”
Non lasciarti confondere dal nostro esempio: per utilizzare il selettore dei discendenti ti basterà separare con uno spazio due selettori di qualsiasi tipo.
Selettore dei figli (Child selector)
p > span {
color: red;
}
Il selettore dei figli serve per selezionare gli elementi figli diretti di un genitore.
Analizziamo bene la frase:
nel nostro esempio qui in alto, l’elemento padre è il ‘p’ (a destra di >) e l’elemento figlio è lo span (a sinistra di >); ma cosa vuol dire figlio diretto? Con “figlio diretto” intendiamo solo il “primogenito”, vale a dire solo l’elemento immediatamente dentro quello paterno.
Un ulteriore esempio, potrebbe essere utile:
<div>
<p>
ciao a <span> tutti </span>
</p>
</div>
Il figlio diretto, in questo caso, sarà solo il tag p, poiché interno al tag padre div; il tag span – interno al p – sarà separato dal tag div per colpa del tag p stesso. Quindi, per andare a selezionare lo span, non potremo mai usare il child selector nel modo che segue:
div > span {
color: red;
}
Perchè no? Perchè nel nostro esempio lo span non è immediatamente interno al tag div, dunque non è suo figlio diretto.
Selettore dei fratelli ( adjacent sibling selector )
p + p {
font-weight: bold;
}
Il selettore fratelli permette di selezionare un elemento (a destra del simbolo +) posto immediatamente dopo un altro (a sinistra del simbolo +).
Tieni a mente il codice soprastante e osserva parallelamente l’ html di riferimento qui sotto:
<div> <p> Esempio 1 </p> <p> Esempio 2 </p> <p> Esempio 3 </p> <div> Esempio 4 </div> <p> Esempio 5 </p> </div>
In questo caso, quindi, staremmo selezionando – per dare loro il grassetto – tutti i paragrafi preceduti da un altro paragrafo:
parliamo, nello specifico, di ‘Esempio 2’ ed ‘Esempio 3’ (laddove ‘Esempio 2’ segue il <p> ‘Esempio 1’ ed ‘Esempio 3’ segue il <p> ‘Esempio 2’)
Sarà, invece, escluso dalla selezione ‘Esempio 5’, poichè non immediatamente preceduto da un tag p, ma successivo ad un <div>.
Potrà risultarti un po’ ostico le prime volte, ma via via che prenderai dimestichezza scoprirai che è più facile a farsi che a dirsi!
Selettore generale dei fratelli (General sibling selector)
Il selettore generale dei fratelli è molto simile al selettore dei fratelli che abbiamo appena visto. La differenza è che l’elemento selezionato non deve necessariamente essere immediatamente successivo al primo elemento, ma può apparire ovunque dopo di esso.
La sintassi sarà, questa volta, la seguente:
p ~ p {
font-weight: bold;
}
Se utilizziamo la stessa struttura html dell’esempio precedente, anche l’ultimo elemento <p> (‘Esempio 5’) sarà selezionato da p ~ p, perché è preceduto da un altro elemento <p>, anche se non direttamente.
Selezione multipla
Se vogliamo, infine, possiamo concatenare più selettori, separandoli con una virgola, per dar loro le stesse proprietà css.
h1, h2, h3 {
color: purple;
}
