Il css è stato con javascript la leva con cui l'html delle pagine web è decollato verso vette mai raggiunte prima; in questi hanno come esperto di interfacce UI ho avuto a che fare tantissimo con i fogli di stile (css) e per questo ho deciso di scrivere un corso, e mettere a disposizione di tutti quello che ho appreso, a volte sulla mia pelle, di questo fantastico sistema di gestione layout.

Cenni storici

Due parole brevissime sull'evoluzione dei css; all'inizio dell'html e fino alla versione 4, il grosso limite era dato che l'html era anche utilizzato con fini di formattazione e impaginazione del testo; era una soluzione grezza con cui tutti i web developer dovevano fare i conti nel tentativo velleitario di riuscire a dare layout che fossero in grado di coprire esigenze tipografiche; l'utilizzo di frame e tabelle era un gioco al massacro non agevolato dall'interpretazione anarchica di ogni browser, con il famigerato windows internet explorer che si comportava come il più recalcitrante dei cavalli imbizzarriti. Riuscire a fare layout degni di questo nome e che fossero uniformi nel comportamento nei vari browser a volte era un puro esercizio di fede... L'html doveva assolvere primariamente un altro compito, che era quello di strutturare una pagina al di là di logiche di stile e presentazione. Per ovviare a questa grave situazione di commistione tra contenuto e presentazione, venne inventato il linguaggio CSS, con l'intento di separare le due cose, e fornire maggiore versatilità ed accessibilità.

Il lavoro tra l'html e i fogli di stile (CSS) avveniva a braccetto, in quanto il foglio di stile era collegato con la pagina html.

Come è collegato un foglio di stile ad una pagina html

Ci sono diverse modalità con cui collegare css ad una pagina html:

stili inline
stili interni
fogli di stile esterni
comando import

Passiamoli in rassegna, rapidamente.

Stili inline

Utilizzare gli stili inline consiste nel dare informazioni di stile direttamente all'interno del codice html, proprio come avveniva all'inizio; proprio perchè mantiene ancora uniti contenuto e presentazione, ovvero proprio ciò che si vuole evitare con il css, è raramente usato e dovrebbe essere evitato come la peste, per tutte le ragioni storiche spiegate sopra; ecco comunque un esempio:

<html>
<p style="color: red">AM IT Projects</p>
</html>

Il risultato sarà:

AM IT Projects

Stili interni

Gli stili interni alla pagina html sono istruzione css inseriti all'interno del blocco <head></head> della pagina html; sono istruzioni che valgono per tutta la pagina html, ma il loro grosso limite è che essendo contenuti all'interno della singola pagina hanno effetto solo su di essa, con ovvie implicazioni di manutenzione (immaginate un sito con oltre 100 pagine distinte). L'esempio di codice potrebbe essere

<html>
<head>
<title> Esempio di CSS interno </title>
<style type="text/css">
p{ color: red;}
</style>
</head>
<body>
<p>AM IT Projects</p>
</body>
</html>

Il risultato sarà analogo al primo, ma in questo caso l'istruzione sarà valida per tutti gli elementi <p> della pagina; anche in questo caso, se possibile evitarne l'uso.

Fogli di stile esterni

Finalmente arriviamo al metodo da utilizzare se si vuole veramente che i fogli di stile siano SEPARATI dal codice html; consiste, lo avrete certamente intuito, nel raggruppare tutte le istruzioni css in un foglio di stile esterno che linkiamo dalla pagina html; quello che dobbiamo ricordare è che tutto era partito dall'esigenza di separare contenuto da presentazione e per questo motivo HTML e CSS andrebbero se possibile sempre tenuti separati.

Il collegamento con il foglio di stile avviene tramite l'istruzione:

<html>
<head>
<link rel="stylesheet" type="text/css" href="/miofogliodistile.css">
</head>
<div>
AM IT projects è proprio un bel sito
</div>
</html>

Diciamo che il contenuto della pagina html deve essere "vestito" con le istruzioni che si trovano nel file miofogliodistile.css

A questo punto nel file css miofogliodistile.css scriviamo:

div {
color: red;
}

Tramite questa istruzione indichiamo che vogliamo il testo dell'elemento div di colore rosso; come vedete l'istruzione css si compone sempre di una coppia proprietà - valore separati dai due punti, mentre punto e virgola termina l'istruzione; la serie di attributi che appartengono ad un selettore (nel nostro caso un div) sono racchiuse tra parentesi graffe.

Racchiudere le istruzioni in un uno (o più) fogli di stile separati dall'html ci consente di avere un unico punto in cui effettuare le modifiche con ovvi vantaggi di manutenzione (ripensate al sito con oltre 100 pagine distinte); per tutta questa serie di motivi, questo metodo di collegamento alle istruzioni CSS è quello corretto da utilizzare e da preferire.

Comando @import

L'ultima modalità di collegamento è una modalità di "emergenza", da utilizzarsi con parsimonia; sia basa sul fatto che le istruzioni css sono sequenziali (cascade) e quindi l'ultima istruzione vince (almeno quasi sempre, come vedremo), per cui se ad esempio abbiamo:

<html>
<head>
<link rel="stylesheet" type="text/css" href="/miofogliodistile.css" >
<style type="text/css"> @import url(miosecondofogliodistile.css); </style>
</head>
</html>

Come vediamo l'istruzione @import è racchiusa nei tag style, e questo fa si che le istruzioni contenute nel file miosecondofogliodistile.css siano quelle che predominano rispetto alle medesime contenute nel file miofogliodistile.css; quindi se nel file miosecondofogliodistile.css avessimo l'istruzione

div {
color: yellow;
}

avremmo che questa vincerebbe e quindi in questa pagina (e solo questa) il div avrebbe il testo di colore giallo; come detto questa modalità è una modalità di applicazione css da utilizzare quando si debba fare modifcihe spot alle singole pagine (es. home page) senza propagare la modifica a tutte le pagine che linkano il file "miofogliodistile.css"

Al cuore dei css: tutto è visto come un box

Sebbene sia oggetto di modifica e ci siano proposte di cambiare il concetto, ad oggi css continua a suddividere lo spazio visivo come dei box rettangolari composti e con caratteristiche che dobbiamo imparare a conoscere; ciascuno di questi box si colloca in uno spazio; lo spazio allìesterno del bordo del box è detto margine, quello all'interno è detto padding e la linea che delimita il box con le sue caratteristiche di tipo di linea, spessore e colore, è detta bordo. Quindi dovendo descrivere uno di questi box possiamo utilizzare margini e padding per posizionare il contenuto e il bordo per delineare il box.

Come si compone una pagina: il concetto di flusso

Il testo in una pagina "fluisce" secondo le caratteristiche della scrittura occidentale,quindi il flusso "normale" scorre da sinistra verso destra e dall'alto al basso. In condizioni normali abbiamo che gli elementi che compongono la pagina vengono posizionati in questo ordine di riempimento dello spazio libero; css può prendere il comando ed istruire il browser di collocare in modo diverso gli elementi tramite precise istruzioni di posizionamento che vedremo nelle prossime lezioni.