Alcuni utili suggerimenti per chi inizia con i CSS

Chi vuole iniziare a programmare il proprio sito internet deve assolutamente conoscere i CSS (Cascading Style Sheet) comunemente detti anche fogli di stile.

Essi vengono usati per definire posizione, dimensione, comportamento ed in generale definiscono come verranno rappresentati i documenti in Html Xhtml etc..

I CSS permettono quindi la separazione in due parti separate dei codici rappresentanti del contenuto con i codici rappresentanti della formattazione e i vantaggi sono molteplici.

Oggi vi propongo un breve vademecum come introduzione alla programmazione CSS, prendeteli come dei consigli per iniziare.


1) Resetta il CSS prima di inziare:
Una cosa che fà impazzire quasi tutti gli sviluppatori web è che i diversi browser visualizzano alcune voci CSS in modi differentiè. Questa particolarità (che via via tende a diminuire) è veramente fastidiosa e comporta che quasi sempre, per avere la perfezione, tocca fare un css per explorer, uno per firefox, uno per netscape etc. Il problema fondamentale che molti aspetti grafici sono stabiliti dalle impostazioni di Default del browser

Ovviamente la cosa non è accettabile, quindi per prima cosa nelle vostre pagine caricate un CSS di reset, questi tipi di css reimpostano tutti gli stili fondamentali azzerandone le differenze di visualizzazione.

Tra i CSS di reset maggiormente utilizzati vi consiglio Eric Meyer’s CSS ed Yahoo Reset CSS.

2) Non usare le tabelle, usa i DIV
Un tempo per fare una pagina web si creava una tabella, si divideva in celle più o meno grandi, si inserivano i contenuti ed il gioco era fatto. Ovviamente le possibilità di formattare una tabella erano alquanto limitate e con i canoni di oggi quei siti risultano a dir poco obsoleti.
Oggi le tabelle sono state sostituite dal DIV, tale elemento rappresenta un contenitore virtuale nel quale possiamo inserire qualsiasi cosa, e fortunatamente ha un altissimo grado di formattazione.
Per richiamare un DIV si usa:

<div> --> Apre il contenitore virtuale
Nel contenitore posso inserire quello che voglio
</div> --> Chiude il contenitore virtuale

3) Capisci subito la differenza tra Class e ID
Entrambi sono utilizzati per definire gli aspetti di presentazione ma sono sostanzialmente diversi:

Class viene utilizzato per definire attributi che verranno ripetuti più volte nella pagina.
Id al contrario definisce attributi unici, essi identificano univocamente una parte della pagina.

Per chiarirvi le idee guardate l’esempio qui sotto:

HTML:
<div id="contenitore">
<div class="box">Lorem ipsum dolor amet...</div>
<br/>
<div class="box">Lorem ipsum dolor amet...</div>
<br/>
<div class="box">Lorem ipsum dolor amet...</div>
</div>


CSS:

#contenitore{stili stili stili}; --> Qesto rappresenta l' ID
.box{stili stili stili}; --> Questo rappresenta il CLASS


4) Ordinato è meglio
Cercate sempre di essere il più ordinati possibile quando stendete il vostro CSS. Lo dico per esperienza, in progetti complessi a volte vi vengono pagine e pagine di codice che finche ci state lavorando è tutto chiaro ma se riprendete il progetto tempo dopo richia di farvi perdere ore a decifrare quello che avete fatto… e chi non legge la propria scrittura.. asino per natura :).

Cmq siate ordinati, dividete il css in zone che possiate subito riconoscere, per questo sono molto utili i commenti. I commenti nei css vanno inseriti tra /* ed */.


/* Gestione header */
<div>
CODE
</div>
/* Fine Gestione header */



/* Gestione header*/
<div>
CODE
</div>
/* Fine Gestione header */


/* Gestione header */
<div>
CODE
</div>
/* Fine Gestione header */


I consigli non finiscono certo qui.. domani la seconda parte >>

a presto.MrFlock.