Prepariamo lo zaino
Prima di partire assieme per l’esplorazione di questo misterioso mondo, è bene preparasi al meglio. Ogni accorto esploratore, deve preparare il proprio zaino con le cose che gli serviranno per sopravvivere in un ambiente “ostile”.
Nel nostro caso, dobbiamo preparaci al meglio con alcuni piccoli concetti di base riguardanti HTML e CSS.
Non farò una disamina completa sull’HTML: se stai leggendo questo manuale, do per scontato che tu sappia cosa sia e come utilizzarlo al meglio!
Anzitutto, vediamo come è possibile utilizzare CSS all’interno di un documento HTML. Essenzialmente esistono 3 modalità. Te le elenco in ordine di importanza e di esecuzione:
stili inline; gli stili vengono applicati direttamente sul tag HTML con l’attributo style="";
<div style="color:red; background:#000;"></div>
<style>
div{
color:red;
background:#000;
}
</style>
stili esterni; gli stili vengono scritti in un file esterno (con estensione .css) e vengono allegati in <head> con il tag <link>
<link rel="stylesheet" href="css/style.css" />
Come scritto poco fa, l’ordine non è casuale! Difatti, queste tre modalità te le ho riportate in modo da farti capire le priorità di esecuzione e applicazione: inline > <style> > <link>.
Utilizzare degli stili inline fa sì che questi stili non possano in nessun modo essere modificati o sovrascritti da un altro stile. In linea generale, gli stili inline non andrebbero mai utilizzati, se non con l’ausilio di JavaScript per modificare “on the fly” l’aspetto e il comportamento di un elemento.
Assieme alle priorità di esecuzione di CSS, ti ricordo anche la proprietà fondamentale di questo linguaggio: la cascata. Il principale vantaggio di CSS è che puoi ridefinire uno stile, se questo stile è conseguente a quanto definito prima.
.red{
color: red;
}
.red{
color: #ff0000;
}
In questo piccolo esempio il colore reale finale che verrà applicato all’elemento di classe .red sarà il magenta, ossia la seconda definizione. Per capire meglio questo, devi anche tenere conto di un altro fattore: le catene. Più concatenazioni farai per applicare degli stili e maggiore punteggio quella data catena avrà. Non solo, anche gli elementi che utilizzi per formare una catena variano il suo punteggio, essi sono: #id > .class > tag. Ad esempio:
h2{}
#column h2{}
La seconda definizione sovrascriverà la prima, ovviamente solo nel caso ci siano degli H2 all’interno di #column. Tuttavia, fai attenzione a questo, perché è un aspetto molto importante nel lavorare con i CSS: più lunghe saranno le tue catene e più difficoltà avrai nel poterle modificare. Inoltre, stai attento anche all’uso degli #id. Avendo un punteggio molto alto, sarà molto complicato andare a sovrascrivere uno stile come quello soprastante. Gli #id dovrebbero essere usati per stili specifici o congiuntamente all’utilizzo di JavaScript.
Infine attenzione anche alle lunghezze. Una catena di questo tipo:
body.article #comments .comment .comment-name{}
oltre ad essere complicata da capire e da leggere, fa aumentare enormemente il peso del tuo CSS. Nella stragrande maggioranza dei casi, catene di questo tipo possono essere semplicemente ridotte in:
.comment .comment-name{}
o, addirittura, in:
.comment-name{}
Questo dipende molto da te: scegli in modo saggio come chiamare i tuoi elementi e basati solo in parte sul contesto in cui si trovano. Nell’esempio soprastante, quante varianti di commenti pensi che utilizzerai nel tuo sito? Penso una sola… per cui, ha veramente senso una catena lunga?
Come ultima cosa, ricorda la distinzione fondamentale tra i due tipi di elementi: block e inline. I tipi block hanno sempre larghezza 100%, ossia occupano l’intera larghezza messa a disposizione dal proprio genitore. Gli elementi inline, invece, occupano tanto spazio, quanto occupa il loro contenuto. Come vedremo, esistono anche altre tipologie di elementi, ma per il momento è bene che tu abbia a mente e sappia riconoscere questi due.
Ora che abbiamo tutte le attrezzature necessarie e fondamentali, possiamo incamminarci verso la nostra meta. Gambe in spalla, che la strada è lunga!