Css, che mania! Come costruisco un layout con i css?

Partendo dalla definizione di CSS (Cascade Style Sheet) e cioè dei fogli di stile a cascata possiamo intuire che il loro utilizzo si basa su di una regola principale: le gerarchie. La parola “cascata” sta infatti a richiamare l’idea che se definiamo l’attributo di un tag esso si ripercuoterà su tutti i tag in esso contenuti o da esso dipendenti.

Esempio: se definiamo nel css che il nostro tag BODY deve avere un font di colore nero, in questo caso praticamente lo andiamo ad attribuire a tutta la pagina, dato che il tag BODY comprende tutto quanto viene mostrato all’utente.

Detto ciò spieghiamo anche che il css non è altro che un file collegato alla nostra pagina html, che contiene quindi tutte le definizioni dei tag presenti in essa con tutti gli attributi che ci servono per definirne innanzitutto la posizione all’interno del layout e poi gli stili grafici degli stessi (tipo di font, colori o immagini di sfondo, allineamenti del testo, etc).

Ora, saltando appunto come includere un css in un html (potete consultare il seguente articolo) passiamo ad un piccolo lavoro concettuale, che deve precedere lo sviluppo della pagina html e del suo css.

Immaginate di dover scomporre il vostro layout in tanti box, che conterranno le informazioni che ci interessano. Ad esempio un sito base solitamente è composto da un box superiore che contiene la testata grafica e il menu, un box centrale che contiene testi e quant’altro e un footer (piè di pagina) che chiude la pagina con le informazioni sintesi sul sito (chi detiene il copyright, chi l’ha fatto, partita iva se si tratta di azienda, etc). Il tutto deve avere un ulteriore contenitore che “tenga insieme” gli altri, poi ne studieremo l’utilità.

Esempio di codice:

Qui inseriremo la testata
Qui i contenuti

Nel css li esplicheremo nel seguente modo:

#contenitore {…}

#testata {…}

#contenuti {…}

#footer{…}

Dove, all’interno delle parentesi graffe, avremo gli attributi necessari a definire stile e posizione dei summenzionati box.

A tal proposito vi invito a consultare il seguente articolo di Troiani a supporto di quanto detto con degli esempi.

Approfondiremo in seguito questo argomento, non temete. E’ solo il primo passo.

Notate come questi box siano evidenziati tramite “id”: sono elementi che possono esistere una sola volta all’interno della pagina ed identificano box ben definiti e precisi. Quest’uso è differente da quello delle cosiddette classi (

…) che invece identificano un box che può ripetersi anche più volte nella stessa pagina, ed è definito con la “classe” proprio perchè avrà una classe di stili che si possono ripetere e usare più volte.

A presto!

lauryn

Web designer dal 2002, mi occupo di content marketing per la società WordSteps SLT LTD di Edimburgo e altri clienti. Vivo a Milano, sposata con una figlia e due cagnoline, e una passione per libri e Scozia.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

%d blogger hanno fatto clic su Mi Piace per questo: