Imparare i CSS ? Ecco da dove iniziare

Nel mio lavoro mi occupo dello sviluppo del back end delle applicazioni, cioe’ quella parte spesso chiamata business logic.

Da poco sto sviluppando una piccola web application, devo quindi anche creare l’interfaccia utente, spesso chiamata front end.

Per non adottare soluzioni proprietarie e poco accessibili, ho scelto gli standard HTML ed i Fogli di Stile a Cascata (CSS).

Quando si apprende una nuovo argomento, si e’ spesso travolti da tante domande, le cui risposte non si trovano quasi mai in un unico articolo.

Ecco le domande che mi sono posto e gli articoli dove ho trovato risposta.

D) A cosa servono i CSS ?
R) A dare l’aspetto grafico ai documenti HTML.

D) Ma non bastava l’HTML ?
R) No. Prima dell’affermazione del formato CSS, l’aspetto grafico veniva dato con i vari tag dell’HTML, questo generava moltissima ridondanza di codice, scarsa leggibilita’ e bassa mantenibilita’, ed errori di interpretazione dei vari browser.
I CSS risolvono tutti questi problemi.

D) A dire il vero, pur usando i CSS, molte pagine vengono visualizzate in modo differente, da browser differenti ! Non e’ questo un obiettivo mancato dei CSS ?
R) Sono daccordo con te, anche se il problema non sta nei CSS, ma nei browser che lo interpretano.
Ad esempio, alcuni errori riguardanti Internet Explorer sono cosi’ conosciuti che esistono delle soluzioni standard descritte in molti siti.

D) Esistono tantissime risorse sul web, da dove inizio ?
R) Io ho iniziato da W3schools, e’ un sito semplice e ricco di piccoli esempi che puoi modificare al volo.
Ho poi scaricato qualche template, da FreeCssTemplate per studiarne il codice. Modificavo il CSS e l’HTML con un text editor (spesso uso Kate o Scite) e poi verificavo i risultati ricaricando la pagina dal browser (F5).
Per chi muove i primi passi, il tutorial Primi passi con HTML + CSS e’ una buona lettura.
Davvero utile ed un po’ piu’ avanzato e’  MaxDesign .

D) Come si applica il CSS al file HTML ?:
R) Esistono tre modi:
- css interno (embedded)
- css esterno
- css in-line
ecco spiegato come fare: Introduction to CSS.

D) Qual’e’ la differenza tra Class e ID Selector ?
R) I Class Selector e Class ID servono per selezionare una parte di HTML al quale applicare uno stile.
Class puo’ essere usato molte volte all’interno dell’HTML, ID invece solo una volta.
Una risposta completa la trovi su Selectutorial.

D) La proprieta’ Margin si comporta in modo inaspettato, e sembra non considerare i valori che ho impostato. Perche’ ?
R) Studiando il funzionamento di margin ho capito perche’ il margine degli elementi sembra comportarsi in modo assurdo. Bisogna per per prima cosa capire il Box Model e come viene gestito il Margin Collapsing, sia nel caso di elementi adiacenti che quello di elementi innestati (nested).
Ecco due articoli che spiegano il funzionamento:
Margin Collapsing
CSS-Auto height and margin collapsing

D) Come funziona il posizionamento degli elementi ?
R) Esistono varie modalita’ per il posizionamento degli elementi: static, relative, absolute, and float.
Bisogna capire il modo come queste funzionano nel posizionare gli elementi.
A tale scopo ho trovato molto utile Learn CSS Positioning in Ten Steps ed Il posizionamento CSS

D) Come faccio a capire se il CSS che ho scritto e’ corretto ?
R) Puoi controllare se il tuo documento e’ valido (validarlo) con il CSS Validation Service.

D) Qual’e’ il modo piu’ veloce per imparare i css ?
R) Non esiste “il modo” adatto a tutti. Comunque, un modo secondo me utile, e’ leggere e capire fogli di stile fatti da designer esperti. In CSS Zen Garden ne puoi trovare davvero ben fatti.

Spero di averti chiarito qualche idea.
E tu hai qualche consiglio o conosci qualche sito utile ?