Come affrontare i CSS senza paura

Emma TracanellaGGD Team Milano

Definizione

I fogli di stile a cascata, meglio noti con l'acronimo CSS (dall'inglese Cascading Style Sheet) e detti anche semplicemente fogli di stile, vengono usati per definire la rappresentazione di documenti HTML, XHTML e XML. Le regole per comporre i fogli di stile sono contenute in un insieme di direttive (Recommendations) emanate a partire dal 1996 dal W3C.

(da Wikipedia)

Un gioco!Un gioco!

•Scopo

•Strumenti

•Principi di base

•Scopo

•Strumenti

•Principi di base

Idea di baseSeparare contenuto da presentazione

HTML vs CSS

HTMLHTML CSSCSS

ContenutoContenuto PresentazionePresentazione

Tag, classi e id - HTML

<div class=”rettangolo” id=”pippo”>

contenuto

</div>

Classi e id - CSS. rettangolo {

border: 1px solid Gray;...

}

#pippo {background-color: OrangeRed;...

}

ImportanteVince sempre l’ultimo!

.rettangolo {background-color: Yellow;...}..... rettangolo {background-color: Red;...}

Strumenti

• Editor di testo

• Programma di grafica

Strumenti

Browser = Firefox

Strumenti

Web developer addon

Ricordarsi sempre

•W3C e W3CSchool

•Google!

•....

E ora si iniza!•Riuso dei CSS

•Cercare la soluzione più semplice

F12

Modifiche in diretta

Costruire un layout

Identificare la struttura

HTML

•Ben formato <tag> ... </tag>

•Non inserire tag inutili

•Usare body, h1, h2, a, ...

Costruire il CSS•Ereditarietà => no ripetizioni

•/* commenti */

•Ordine

•Come le scatole cinesi

•Testing continuo

Il CSS vi fa ancora paura?

Attenzione :)

Emma TracanellaGGD Team Milano - emma.tracanella@girlgeekdinnersmilano.com