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 testataQui 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 (
A presto!
