1. I Fogli di stile (CSS) sono facili da usare e implementare nelle vostre pagine e servono a dettare delle regole per gli oggetti usati nelle stesse. La pagina resta così pulita e piacevole da visualizzare perché permette di separare il contenuto dai dati in maniera ottimale.
   Ma padroneggiare i css è un arte vera e propria. L’atto di fare il matching delle regole dei fogli di stile ai tags HTML è simile ad una conversazione: entrambe le parti hanno bisogno di essere chiaro e in sincronia con l’altro, altrimenti ci si parlerà sopra causandoci solo un gran mal di testa.
2. General o Specific Matching: Supponete di voler applicare uno stile al tag header nella vostra pagina. Potete scegliere quanto possa essere generale o specifico il vostro stile da applicare :
   Per applicare lo stile a tutti i tags, usate la regola h1 {…}
   per applicare lo stile a tutte le tags in un certo posto e.g. for ’s dentro tag paragrafo usate la regola p b {…} ;
   per applicare lo stile a tutti gli headers di un certo tipo, aggiungete class="myheader" l tag che volete modificare e usate la regola css .myheader {…} ;
   per app. lo stile a solo un si singolo header, aggiungete id="myheader" al tag e usate la regola #myheader {…} Potete combinare queste regole in modi differenti.Per applicare lo stile al tags di tipo "webproject" dentro la forms di tipo "magicform", usate la regola form.magicform h1.webproject {…}

3. Il Target: Per evitare di perdere troppo tempo per le regole di matching seguente il seguente trucchetto: prima che la vostra regola sia sicuramente matchata, non usare alcuna proprietà CSS ad esclusione di color: red; E’ veloce da scrivere e facile da individuare. Se il testo della vostra pagina diventa rosso allora siete sicuri che la regola è applicata correttamente agli oggetti che volete. Solo allora, che avrete messo a punto i vari match con i corrispondenti oggetti nelle vostre pagine potete cancellare color: red; e scrivere le vostre regole CSS.
4. Un layout CSS è come una grande borsa piena di oggetti, ciascuno dei quali può esercitare delle forze (Come il gettito di un gas) Alterando i CSS, aggiustate le forze (margini,float etc)Guardando il vostro browser muovete la borsa e vedrete che gli oggeti si posizieranno dove le “forze” li hanno direzionati. Questo è il segreto dei fogli di stile . Saper padroneggiare queste forze e bilanciare gli oggetti .
   Ex 1: per centrare qualcosa utilizzate margin-left: auto; e margin-right: auto; Questo funziona perché bilanciate le forze a destra e sinistra così che l’elemento è mantenuto perfettamente al centro come una palla di ferro tra due magneti.
5. Corollario 1: Questa regola CSS appartiene al posizionamento “relative”. E’ possibile utilizzare anche “absolute” ma potrebbe causare grossi problemi nella visualizzazione del sito.
6. Regola A – Divs e Spans: Ci sono due tag chiamati “<div>” e “<span>” Entrambi non hanno proprietà di default a parte il fatto che i div sono dei box mentre i secondi sono “inline” con il testo, sono tags generiche dove applicarci gli stili.
   
7. Regola B – Divs sono dei box, Spans sono testo, non usare quindi div per il testo e span per i box e il layout ne gioverà parecchio ;)
   
8. Global, Local, or Intimate: le proprietà CSS possono essere applicate a tre livelli. Attraverso pagine multiple (attraverso vostrostile.css), su una singola pagina (in a style block), o una specifica tag su una pagina. Quando avete finito il layout è buona norma esportare il tutto in un file esterno con esternsione .CSS così da poterlo condividere globalmente.
9. Rendilo CHIARO: scrivere codice pulito in HTML di questi tempi è cosa relativamente semplice.
   Ma anche persone che si considerano e1337 CSS HAX0Rs spesso non scrivono codice css davvero pulito ed efficiente. Efficienza non significa velocizzare il caricamento delle pagine ma semplicemente fare in modo che il proprio codice continui a fare il suo lavoro.
   3 Trucchetti:
   
   1. Condensare le regole (font-family, font-size) oppure (margin-left, margin-right) in una singola linea: margin: 0px 10px 10px 10px;
   2. Puoi applicare quante classi di stile vuoi su un singolo tag basta inserire degli spazi tra i nomi , tipo:.redtext {font-family: Arial, Helvetica, sans-serif; color: red;} .bluetext {font-family: Arial, Helvetica, sans-serif;color: blue;}, questo è il segnale che probabilemnte non conoscono questo trucco.
   3. Usa le virgole per applicare la stessa regola CSS a diversi tags HTML tutti in una sola volta: p, b, i {… applicheranno lo … style ai paragrafi, grassetto, italico tutto in una linea.

   
   

10. Altri css tutorials

Partire con i CSS è il panico per chiunque ma non preoccupatevi non siete voi gli stupidi, Css lo è.Non dovete memorizzare tutte le proprietà , potrete tenerle sotto controllo

tramite le API API’s handy cheat sheet. Buon Divertimento.

Traduzione dall’ articolo originale blog.jm3.net