Dopo aver visto che cos’è il CSS, passiamo in questo articolo a vedere praticamente come si usa attraverso quella che è la sua sintassi e quelli che sono i suoi selettori. Prima di iniziare però, è bene ricordare che il CSS può essere scritto in linea (ovvero dentro al tag HTML a cui si vuole applicare lo stile), all’interno del documento HTML (all’interno di <head></head>) o in un foglio di stile esterno che sarà richiamato all’interno del nostro foglio HTML (sempre all’interno del <head></head>).
La sintassi
Il principio base della sintassi del CSS è che esso è costituito da un selettore e da un blocco di dichiarazione, racchiuso all’interno delle parentesi graffe {}. A sua volta la dichiarazione è composta da una proprietà e da un valore, come si può ben vedere nell’immagine che segue.
Il selettore punta all’elemento HTML a cui si desidera applicare lo stile. Il blocco di dichiarazione contiene una o più dichiarazioni separate da punto e virgola. Ogni dichiarazione include un nome di proprietà CSS e un valore, separati da due punti. Più dichiarazioni CSS sono separate da punto e virgola e i blocchi di dichiarazione sono circondati da parentesi graffe.
Vediamo un esempio:
h1 {
color: blue;
text-align: center;
}
p {
color: red;
font-size: 18px;
}
h1 è un selettore in CSS (punta all’elemento HTML che si desidera applicare: <h1>).color è una proprietà ed è il valore della proprietà bluetext-align è una proprietà ed è il valore della proprietà è center
p è un selettore in CSS (punta all’elemento HTML che si desidera applicare: <p>).color è una proprietà ed è il valore della proprietà redfont-size è una proprietà ed è il valore della proprietà è 20px
Nel primo esempio stiamo dicendo che tutti gli elementi racchiusi nel tag h1 saranno di colore blu e il cui testo sarà allineato al centro; nel secondo che tutti gli elementi racchiusi nel tag p, saranno di colore rosso e avranno una grandezza di testo di 18px.
I selettori
Un selettore CSS seleziona gli elementi HTML a cui si desidera applicare uno stile. I selettori vengono utilizzati per “trovare” (o selezionare) gli elementi HTML che si desidera applicare un determinato stile.
Possiamo dividere i selettori CSS in cinque categorie:
- Selettori semplici (selezionare gli elementi in base a nome, id, classe)
- Selettori combinatori (selezionare gli elementi in base a una relazione specifica tra di loro)
- Selettori di pseudo-classe (selezionare elementi in base a un determinato stato)
- Selettori di pseudo-elementi (selezionare e applicare uno stile a una parte di un elemento)
- Selettori di attributi (selezionare elementi in base a un attributo o a un valore di attributo)
In questo articolo ci soffermeremo in particolare sui selettori semplici: per approfondire gli altri tipi vi rimando a siti più specifici come w3schools.com. Il più semplice dei selettori semplici è il selettore di elemento (vedi sopra).
ID
Il selettore id utilizza l’attributo id di un elemento HTML per selezionare un elemento specifico. L’id di un elemento è univoco all’interno di una pagina, quindi il selettore id viene utilizzato per selezionare un elemento univoco! Per selezionare un elemento con un ID specifico, scrivere # seguito dall’id dell’elemento.
#para1 {
text-align: center;
color: red;
}
La regola verrà applicata all’elemento HTML con id=”para1″.
Classe
Il selettore di classe seleziona elementi HTML con un attributo di classe specifico. Per selezionare elementi con una classe specifica, scrivere . seguito dal nome della classe. È inoltre possibile specificare che solo elementi HTML specifici devono essere interessati da una classe. Ad un singolo elemento possono essere applicate più classi.
.center {
text-align: center;
color: red;
}
La regola verrà applicata a tutti quegli elementi HTML che avranno class=”center”.
p.center {
text-align: center;
color: red;
}
In questo esempio solo <p> elementi con class=”center”.
Universale
Il selettore universale * seleziona tutti gli elementi HTML della pagina.
Elementi raggruppati
Il selettore di raggruppamento seleziona tutti gli elementi HTML con le stesse definizioni di stile. Per raggruppare i selettori, separare ogni selettore con una virgola.
NORMALE
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
RAGGRUPPATA
h1, h2, p {
text-align: center;
color: red;
}