Corso CSS: codice base per la grafica di un sito web

Affiancato all’HTML, c’è un altro linguaggio molto utile nel campo del web, ovvero il CSS. In questo primo articolo vedremo qualche codice base.

Come già spiegato, l’HTML, così come anche il CSS, non sono veri e propri linguaggi di programmazione. Infatti i codici HTML/CSS non vengono compilati da un programma ed eseguiti ma interpretati direttamente dal browser, che restituisce a schermo il nostro codice. Browser differenti possono restituire una grafica diversa ma più o meno molto simile. Nella prima parte di questo corso di CSS andremo a vedere alcuni comandi base per migliorare la grafica di vari elementi. Si andranno ad unire parti di HTML ad elementi di CSS per vedere come un semplice HTML possa ottenere una grafica migliore semplicemente aggiungendo qualche riga di codice in più.

 I fogli di stile

CSS sta per Cascading Style Sheets e rappresenta una tipologia di file che permettono di formattare correttamente una pagina HTML. Già abbiamo visto come è possibile formattare il testo correttamente con il linguaggio HTML. Però adesso cerchiamo di andare un pò più a fondo alla questione, andando a modificare parametri ben più specifici. Vedremo come cambiare il font del testo, il colore o come modificare la struttura stessa della pagina, come i bordi, i contorni ecc. Per chi utilizza WordPress è possibile modificare tutti questi parametri nella scheda Editor, nel menù Aspetto. Una volta entrati nell’editor verrete accolti dalla seguente schermata:

Il cosiddetto file style.css è uno tra i più importanti poichè va a contenere il codice CSS che definisce l’intera grafica del vostro sito. Ogni elemento visivo è rappresentato in questo foglio di stile. Ovviamente sarà differente per ognuno di voi, a seconda del tema WordPress che state utilizzando. Bisogna fare molta attenzione quando si mette mano a questo file poichè si va a cambiare completamente l’aspetto del sito o peggio si rischia di generare errori che richiederebbero un intervento più specifico. Fortunatamente WordPress è dotato della funzione Modifica CSS, sempre nel menù Aspetto, che permette di applicare questi cambiamenti in uno spazio a sè stante, in maniera tale che in caso di problemi basta eliminare il codice inserito qui, riportando il tema al suo stato iniziale.

Struttura di un codice base in CSS

Per definire la struttura di un codice base in CSS, prendete in esame il seguente esempio di codice:

h1 {font: Elvetica; color: red; text-align: center;}

Un codice base in CSS è costituito da due elementi principali: selettore e blocco di istruzioni. Il selettore è l’elemento HTML sul quale andiamo ad applicare le modifiche (nel nostro caso l’elemento h1) e il blocco di istruzioni è l’insieme di operazioni che applichiamo sull’elemento. Le istruzioni vanno racchiuse all’interno delle parentesi graffe subito dopo aver dichiarato l’elemento ed ogni istruzione va separata da un punto e virgola.

Per spiegarvi meglio, andiamo a considerare proprio l’esempio mostrato poche righe sopra. In questo caso applichiamo una modifica all’elemento h1, che in HTML riguarda il titolo dei paragrafi, andandone a cambiare il font, ossia il tipo di scrittura, il colore e l’allineamento. Dopo aver applicato le modifiche, avrete un titolo con font Elvetica, di colore rosso e allineato al centro automaticamente. La comodità del linguaggio CSS è che si può modificare il codice del file style.css una sola volta per applicare la modifica in maniera completamente automatica ogni qualvolta si utilizza quello specifico elemento, senza modificare manualmente il codice ogni volta quando scrivete un articolo.

[adsense]

Elenco di alcuni codici standard

Dopo aver visto la struttura generale di un codice CSS, andiamo a vedere quelli che sono i metodi e le istruzioni più frequenti nel CSS. L’elenco che vi mostriamo di seguito segue la stessa struttura vista prima. Per cui andranno inserite nelle parentesi graffe, dopo aver definito l’oggetto al quale applicarle.

• text-align: permette di allineare il testo secondo uno schema preciso. I valori base sono: left (sinistra), right (destra), center (centro) e justify (giustificato). La differenza tra il centro e il giustificato è che il giustificato adatta lo spazio tra ogni parola affinchè il testo sia perfettamente allineato anche ai lati. E’ facile notarlo anche in questo articolo.
• background: modifica il colore di sfondo di un determinato elemento. Può essere utilizzato per cambiare lo sfondo dell’homepage o di un pulsante di azione. I valori ovviamente riguardano il tipo di colore da utilizzare. A questo proposito è possibile utilizzare termini standard come red (rosso), yellow (giallo) o grey (grigio) oppure inserire il codice esadecimale del colore, come #FF421E, #00E0E0 o #2200A1. Per chi utilizza Photoshop sicuramente avrà già visto questa simbologia. Per tutti gli altri, vi rimandiamo a questo link, che contiene un elenco di colori rappresentati in esadecimale.
• border: modifica la grandezza e lo spessore del bordo di un elemento. E’ utile per creare il contorno di un elemento ben definito. Se si utilizza semplicemente il termine border, bisogna inserire i valori in pixel per ogni lato, separati da uno spazio, ad esempio border: 5px 10px 15px 5px;. Se invece volete modificare il bordo relativo ad un singolo lato, basta utilizzare le istruzioni border-top,border-bottom, border-left e border-right. Il valore del border può essere accompagnato anche da un colore, per definire un ulteriore stile all’oggetto.
• margin: modifica lo spazio esterno all’elemento, ovvero la distanza tra un elemento e l’altro. Anche in questo caso valgono le stesse regole del border.
• padding: spesso vengono confusi il padding con il margin. In realtà la differenza è abissale. Mentre il margin crea uno spazio all’esterno dell’elemento, il padding crea un bordo all’interno dell’elemento, mantenendo invariata la distanza esterna con altri elementi del tema. Le regole per il padding sono le stesse per il border relativi ai lati da modificare.
• heighte width: vanno a modificare rispettivamente l’altezza e la larghezza del blocco dell’elemento. Se volete ad esempio creare un pulsante d’azione e fare in modo che sia ben visibile, vi tornerà utile utilizzare queste due istruzioni per modificare la grandezza secondo le vostre esigenze.
• display: display è forse una delle istruzioni più importanti nell’ambito del CSS. Definisce il modo in cui gli elementi vengono visualizzati a schermo. I valori per questa istruzione sono solamente due: inline e block. Con inline è possibile scrivere una lista di elementi su una singola riga, mentre block semplicemente va a capo con ogni elemento. Un esempio di applicazione può riguardare i paragrafi o un qualsiasi testo in generale. Se si scrivono due paragrafi sulla stessa riga e si applica p {display:inline;}, dove p è l’id HTML relativo ai paragrafi, i paragrafi verranno comunque mostrati sulla stessa riga, anche se definiti separatamente. Se invece andrete ad applicare p {display: block;}, i due paragrafi verranno separati in due differenti righe.

Questi erano alcuni dei codici base del linguaggio CSS. Ovviamente ci sono diverse sfaccettature per queste istruzioni, come ad esempio scegliere il tipo di bordo da applicare o una decorazione per il testo. Ma per il momento vi abbiamo voluto dare solamente un’idea generale su quelle che sono le istruzioni fondamentali del CSS, in maniera da poter già provare a modificare il vostro tema, sempre con la dovuta attenzione.