CSS

html-logo

CSS è l’acronimo di Cascading Style Sheets, cioè fogli di stile a cascata (più brevemente, fogli di stile), ovvero quel particolare linguaggio informatico, la cui sintassi (attualmente alla versione n. 3) è stabilita dal World Wide Web Consortium (W3C) e che stabilisce le regole di stile cioè l’aspetto degli elementi HTML ossia come sono graficamente visualizzati dall’utente. Il CSS, dal punto di vista lessicale:
– è case insensitive, quindi è indifferente scrivere color:black;, Color:Black; o COLOR:BLACK;, ma per una più ordinata e quindi migliore leggibilità del codice, si preferisce usare sempre il minuscolo. Si segnala, peraltro, che i valori degli attributi class e id sono invece case sensitive, quindi .nomeclasse non è uguale a .NomeClasse né a .NOMECLASSE;
– non prevede indentazione del codice, la quale ha solo una funzione estetica che migliora la leggibilità dello stesso (e non pure di sintassi, come ad esempio per Phyton);
– per i commenti, prevede i simboli /* per l’apertura e */ per la chiusura di commenti su una o anche più righe. Non è possibile annidare tra loro i commenti: infatti, la chiusura del commento annidato in realtà chiude il commento genitore.
I web browser hanno un foglio di stile CSS incorporato, che specifica la visualizzazione predefinita di ogni Elemento HTML, in mancanza di diversa specificazione da parte di altro foglio di stile CSS ad hoc.

Inserimento del codice CSS

Il codice CSS può essere inserito nelle pagine web in tre modi diversi (tra loro complementari) e precisamente:

1) Foglio di stile esterno: mediante il tag <link> figlio del tag <head>, che crea uno o più collegamenti al o ai file (.css) contenenti il foglio di stile:

<head>
<link rel="stylesheet" type="text/css" href="mio_css1.css">
<link rel="stylesheet" type="text/css" href="mio_css2.css">
</head>

2) Foglio di stile interno: mediante il tag <style> figlio del tag <head>, che permette di aggiungere direttamente il codice CSS:

<head>
  <style>
    [codice css]
  </style>
</head>

3) Stile inline: mediante l’attributo style dei singoli elementi HTML della pagina, che permette di stabilire le regole di stile direttamente per gli elementi stessi cui accedano.

<[nometag] style="[codice CSS]"> 
  [oggetto]
</[nometag]>

Selettori e regole CSS

Fatta eccezione per l’inserimento inline del codice CSS (cfr. supra, esempio 3) e su cui v. oltre, in tutti gli altri casi è necessario (anche) individuare gli elementi HTML ai quali applicare la regola di stile, e ciò avviene attraverso un c.d. “selettore”, secondo il formato [selettore] { [dichiarazione] }, e precisamente:
1) il selettore individua l’elemento HTML destinatario della dichiarazione CSS, la quale può anche essere unica per più elementi raggruppati, tra loro separati da una virgola (ad es., div, p, span { [dichiarazione CSS] }). Tale individuazione può avvenire attraverso diversi criteri, ossia l’indicazione del tag, o dell’attributo, o della classe, o dell’id, o della pseudo-classe, o dello pseudo-elemento, o della relazione con altri elementi. Tali criteri possono essere combinati tra loro, così da rendere più preciso il filtro della selezione stessa, prevedendo più criteri cumulativamente ed all’uopo indicandoli senza spazi (ad es., a[target="_blank"].classe_a:hover). Qualora si intenda invece selezionare tutti gli elementi presenti nel documento, si usa il carattere jolly [*] che è per questo detto ‘selettore universale’;
2) la dichiarazione stabilisce la regola CSS, a sua volta attraverso il formato [proprietà]:[valore] (ad es., background-color:red), ossia quale aspetto (proprietà) dell’elemento HTML è interessato dalla regola CSS e come (valore). Il valore non va tra virgolette, l’indentazione è facoltativa e, nel caso in cui le regole CSS siano più d’una, ciascuna regola deve terminare con un punto e virgola. A questo punto possiamo ricordare perché i fogli di stile a cascata si chiamano così: la regola di stile viene applicata “a cascata” cioè in base all’ordine con cui vengono stabilite le regole stesse; qualora ad un medesimo elemento vengano assegnate due o più regole con proprietà uguali ma con valore diverso (ad esempio, p {color:black; color:yellow}, prevarrà l’ultima inserita (nell’esempio fatto, quella che stabilisce la regola del colore del testo giallo). A tale criterio si può tuttavia derogare attraverso la dichiarazione !important fatta immediatamente dopo la regola che si intende privilegiare nonostante ce ne possano essere di diverse successive alla stessa. Così, nel codice p {color:black !important; color:yellow}, la regola del colore nero prevarrà sulla successiva. 

[selettore] {
  [proprietà1]:[valore1];
  [proprietà2]:[valore2];
}

Nel caso di codice CSS inline, come detto (cfr. supra, esempio 3), sarà sufficiente la sola dichiarazione della regola (attraverso l’attributo style), nel formato style="[proprietà1]:[valore1]", essendo implicito che essa si riferisca al relativo tag e quindi all’elemento HTML cui afferisca. Anche in tal caso, qualora le regole CSS siano più d’una, ciascuna regola deve terminare con un punto e virgola.

<[nometag] style="[proprietà1]:[valore1]; [proprietà2]:[valore2];">[oggetto]</[nometag]>

Una stessa regola può valere per più selettori, i quali possono pertanto essere raggruppati, purché separati da una virgola:

[selettore1], [selettore2], [selettore3] {
  [proprietà1]:[valore1];
  [proprietà2]:[valore2];
}

Nel caso di elementi html annidati, la regola CSS stabilita per il tag padre viene ereditata dal tag figlio: così, se viene ad esempio stabilito che il testo di un certo paragrafo abbia il colore blu, il testo dell’eventuale elemento em ivi annidato erediterà la stessa regola di stile, se non diversamente stabilito mediante una eccezione espressa.

Bibliografia