Nel campo del web design chiunque abbia intenzione di creare o progettare un sito web non può fare a meno di conoscere i codici HTML e CSS. La conoscenza di questi due linguaggi di programmazione è però indispensabile anche per ogni blogger che voglia gestire autonomamente il proprio sito web. Nonostante i servizi di blogging più comuni e noti ne forniscano già una facile ed intuitiva gestione se si possiede una buona conoscenza base tutto diventa più semplice. Per questo oggi affrontiamo l’argomento in questa piccola guida all’introduzione del codice CSS.
Come è fatto un sito web
Come abbiamo visto precedentemente, e più specificatamente, nell’introduzione al codice HTML, un sito web non è altro che un documento di dati codificati tramite linguaggi di programmazione che un browser è in grado di interpretare rimandandoci costruita la pagina web che vogliamo visitare. I principali linguaggi di programmazione utilizzati nei siti web sono:
- HTML. Linguaggio base di un sito web. Serve per dare struttura e significato semantico ad una pagina web.
- CSS. Andando mano nella mano con l’HTML è fondamentale per personalizzare l’aspetto grafico e visivo di un sito e le sue pagine.
- JavaScript. Permettono di aggiungere dinamicità ed interazioni ai contenuti di un sito web.
- PHP. Costruiscono sul server che ospita il sito le pagine che verranno poi inviate al browser raccogliendo e salvando le informazioni inviate dall’utente.
Oggi ci soffermiamo sul comprendere cosa fa e come funziona il codice CSS.
Introduzione al codice CSS
Che cos’è il codice CSS
Il codice CSS (Cascading Style Sheets) è un linguaggio di programmazione attraverso il quale è possibile gestire tutto il layout di un sito web. Viene principalmente utilizzato per definire la formattazione dei documenti in HTML separandone i contenuti e permettendo così operazioni di gestione e manutenzione dei siti web molto più efficaci e semplici. In parole spicce mentre il codice HTML, con il suo linguaggio di markup, crea le basi di un qualsiasi sito descrivendone e dicendo come devono essere interpretati tutti gli elementi, il codice CSS, con il suo foglio di stile, gestisce le direttive riguardanti la rappresentazione stilistica. In sostanza il suo principale compito è quello di definire il design di un sito web.
Sintassi di un foglio di stile CSS
La struttura di un foglio di stile CSS presenta sempre la stessa sintassi secondo una sequenza di regole che non può e non deve mai essere cambiata o modificata. Si presenta con un selettore seguito da un blocco di dichiarazioni (formate da una proprietà e un valore) racchiuse tra parentesi graffe in questo modo:
selettore {proprietà-1: valore1;proprietà-2: valore2;}oppureselettore 1, selettore 2, selettore 3 {proprietà-1: valore1;proprietà-2: valore2;proprietà-3: valore3;}
Nello specifico la struttura base di un codice CSS è composta da 3 elementi:
- Selettore. Individua determinati elementi del documento HTML a cui fa riferimento la regola da applicare. Può essere singolo o identificativo di più selettori alla volta separati con una virgola.
- Proprietà. Identifica la tipologia di stile sul quale interverrà il comando. E’ possibile applicarne al selettore più di una annotandole una sotto l’altra separate da un punto e virgola.
- Valore. Assegna tramite un numero o del testo le specifiche da applicare.
! Le dichiarazioni, ossia le combinazioni tra proprietà e valore sono sempre separate le une dalle altre dai due punti.
Principali selettori da conoscere
Nel CSS sono supportati diverse tipologie di selettore, ciononostante per avere una buona infarinatura ritengo che in questa mini guida sull’introduzione al codice CSS i principali da conoscere siano i seguenti:
1. Selettore di tipo
Corrisponde al nome dell’elemento al quale fa riferimento e applica la regola a tutti gli elementi HTML dello stesso tipo.
Esempio di sintassi di un selettore tipo applicato al titolo h1:
h1 {proprietà-1: valore1;proprietà-2: valore2;}
2. Selettore di classe
Si scrive con un punto davanti e ha un nome personalizzabile in quanto la classe viene assegnata ad un elemento HTML utilizzando l’attributo class=”nome_classe”. Questo selettore applica la regola a tutti gli elementi della pagina HTML con quella classe specifica.
Sintassi di un selettore di classe:
.nome_classe {proprietà-1: valore1;proprietà-2: valore2;}
! Nel documento sorgente pagina HTML la nomenclatura delle classi è senza il punto davanti.
3. Selettore identificatore (o ID)
Si scrive con il simbolo del cancelletto (o hashtag) davanti e applica la regola ad un singolo elemento della pagina HTML a cui è stata assegnata la proprietà di attributo id=”nome_identificatore”.
Sintassi di un selettore ID:
#nome_identificatore {proprietà-1: valore1;proprietà-2: valore2;}
! Nella sorgente pagina HTML la nomenclatura dell’ID è senza il simbolo del cancelletto davanti.
4. Selettore universale
Quando una regola deve essere applicata a tutti gli elementi di un documento HTML si ricorre al selettore universale la cui nomenclatura presenta solo il simbolo di un asterisco in questo modo:
* {proprietà-1: valore1;proprietà-2: valore2;}
! Spazi e caratteri speciali non sono ammessi e attenzione a maiuscolo e minuscolo perché portano ad interpretazioni diverse. Inoltre c’è da tener presente che i selettori ID hanno priorità di applicazione e lettura codice sulle classi mentre le classi hanno la meglio sui selettori generici.
Proprietà CSS più importanti
Il linguaggio di codice CSS ha numerosissime proprietà (riportate completamente sul sito ufficiale W3C) grazie alle quali ci è permesso definire tutte le regole che vogliamo agli elementi HTML componenti il nostro sito web. In base alla mia esperienza, chiunque necessiti di avvicinarsi al CSS per riuscire a mettere mano nei propri template modificando qualche dettaglio stilistico le principali proprietà più importanti da conoscere sono le seguenti:
background. Definisce lo sfondo di un elemento. (background-colorne da un colore,background-imagelo rende un’immagine,background-positionla posizione ebackground-repeatse deve essere ripetuto.)border. Applica un bordo al componente. (border-colorper dare un colore al bordo,border-radiusarrotonda gli spigoli,border-styleper definirne la tipologia eborder-widthper la larghezza.)color. Per dare un colore all’elemento.float. Permette di disporre altri oggetti ai lati del componente cui è applicato.font-family. Applica le proprietà di carattere al testo definendone la tipologia di font. (font-sizedefinisce la dimensione,font-styleper lo stile di scrittura efont-weightil peso.)marginepadding. Definiscono lo spazio intorno agli elementi.Marginper lo spazio esterno ai bordi epaddingper quello interno.position. Si utilizza per definire il posizionamento di un elemento.text-align. L’allineamento dei componenti.widtheheight. Impostano rispettivamente altezza e larghezza degli elementi.
I valori del codice CSS
Quando non sono specificati i valori CSS fanno assumere ad una proprietà quelli predefiniti da ogni browser. In caso dovessimo intervenire bisogna sapere che tutte le proprietà accettano un blocco valori stabilito. I più usati da conoscere sono:
- Allineamento. I valori da utilizzare per il posizionamento di immagini, pulsanti e testi sono: a sinistra
...: left;, a destra...: right;, centrato...: center;, giustificato...: justify;e come l’elemento genitore...: inherit;. - Bordi. I bordi si possono definire con i principali valori: nessuno
...: none;, nascosto...: hidden;, a puntini...: dotted;, a trattini...: dashed;, linea continua...: solid;e doppio bordo...: double;. - Colore. I colori si possono indicare in RGB (es.
...: rgb (132, 215,208;), con il codice esadecimale (es....: #84d7d0;) o con il proprio nome in inglese (es....: blue;). - Posizionamento. I valori di posizionamento per un elemento sono:
...: absolute;definisce un punto prestabilito dalla proprietà,...: relative;perché si sposti autonomamente senza influenzare gli altri elementi,...: fixed;per fissare l’elemento in un punto specifico sempre visibile all’utente,...: static;rimane in posizione naturale nel flusso degli elelemtni e...: sticky;per farlo rimanere fisso in un punto durante lo scorrimento di una pagina. - Unità di misura. Le unità di misura si possono indicare in vari modi. Le più utilizzate sono i pixel (es.
...: 23px;), la percentuale (es....: 75%;) e quella relativa em (es....: 1em;). Tra il numero e l’unità non devono mai esserci spazi. - URL. Le URL vengono indicate in due modi:
...: url(https://www.fashionsnobber.com/file.html);oppure...: url("https://www.fashionsnobber.com/filehtml");.
Come integrare il foglio di stile CSS in un documento HTML
Per rendere operativi i fogli di stile CSS è necessario creare un’associazione tra i documenti HTML e quelli CSS. In questo modo il browser sarà in grado di applicare ed interpretare il codice CSS all’interno del caricamento del sito web. Per integrare il CSS nell’HTML si può intervenire in 3 modi:
- Dichiarazione all’interno dei tag HTML.
- Assegnare il CSS all’interno del tag
<head>. - Rimandare ad un foglio di stile separato.
Vediamoli nel dettaglio.
1. Come dichiarare il CSS all’interno dei tag HTML
Quando il comando CSS definisce lo stile di una singola parte del codice sorgente le regole possono venire applicate al tag dell’elemento HTML utilizzando l’attributo style=”dichiarazione css”.
Esempio in linea all’interno di un tag HTML: <h1 style="color: blue;">Titolo</h1>
Nel caso in cui si debba applicare un numero elevato di dichiarazioni CSS sarebbe meglio evitare questa soluzione e ricorrere alla creazione di un foglio di stile con richiamo esterno. Questo perché il codice sorgente di una pagina web deve essere il più leggero e chiaro possibile in modo da non rallentare i tempi di caricamento che ne penalizzano l’indicizzazione. Inoltre, qualora si debba apportare modifiche è chiaro quanto sia più pratico affidarsi al foglio di stile piuttosto che cercare all’interno di un documento HTML il punto esatto in cui intervenire.
Esempio in linea all’interno di un tag HTML con numero elevato di dichiarazioni: <h1 style="color: #84d7d0; font-family: "Arial", "Verdana", serif; font-size: 26px; font-weight: bold; text-align: center;">Titolo</h1>
! Questa soluzione è indicata quando non vi è alcuna necessità di configurare un foglio di stile oppure quando tale comando ha una priorità molto elevata. Ad esempio se il sito web è molto minimal e di dimensioni ridotte.
2. Come inserire il CSS all’interno del tag <head> in una pagina HTML
Quando si ha necessità che una regola di stile sia valida più volte per lo stesso elemento occorre definire tutti i comandi una sola volta all’interno del tag <head></head> di un documento HTML. Per fare ciò bisogna utilizzare l’elemento tag <style></style> come riportato nell’esempio di seguito:
<!DOCTYPE html><html lang="it"><head><meta charset="utf-8"><title>Introduzione al codice CSS</title><style>h2 {color: #84d7d0;font-family: "Arial", "Verdana", serif;font-size: 26px;font-weight: normal;text-align; left;}</style></head><body><h2>Come è fatto un sito web</h2>[...]<h2>Introduzione al codice CSS</h2>[...]</body></html>
In questo modo abbiamo detto al browser di applicare automaticamente a tutti i sottotitoli h2 presenti nella pagina web un determinato colore, font, misura, spessore e allineamento. Per applicare queste esatte regole anche alle altre pagine del sito web bisogna integrare lo stesso codice CSS in ogni singolo documento HTML.
3. Come rimandare a un foglio di stile CSS esterno
Quest’ultima soluzione è la più comoda, pratica ed utilizzata da ogni web designer che si rispetti. Infatti quando le regole stilistiche vengono definite su un foglio di stile separato ne permettono una gestione molto più semplice. Tutto questo è possibile creando un file di testo con estensione .css che andrà agganciato al principale documento HTML del sito web tramite il tag <link> all’interno della sezione <head></head>. Avremo quindi la scheda di apertura di un sito web che si presenta in questo modo:
<!DOCTYPE html><html lang="it"><head><meta charset="utf-8"><title>Fashion Snobber</title><link rel="stylesheet" type="text/css" href="nome_foglio_di_stile.css" />[...]</head><body>[...]</body></html>
Optando per questa soluzione avremo la possibilità di richiamare il codice CSS in ciascuna delle pagine web di un sito senza dover andare a modificarle una per una come abbiamo visto nei casi precedenti.
! Il tag <link> da comporre per il codice CSS prevede degli attributi obbligatori quali rel=”stylesheet” (comunica che va collegato un foglio di stile), type=”text-css” (indica un documento CSS in formato testo) e href=”nome_foglio_di_stile_.css” (il nome del file con estensione .css presente nella cartella del sito).
Introduzione al codice CSS: Conclusioni
Con questa mini guida sull’introduzione al codice CSS ti ho dato le nozioni base che ti permetteranno di maneggiare con più sicurezza il file style.css contenuto nel tuo sito internet. Potrai così apportare tutte le modifiche che riterrai opportune a migliorare lo stile del tuo spazio web. Se invece hai bisogno di un’ulteriore aiuto puoi affidarti alla guida su come personalizzare un blog con i codici HTML e CSS. Sono spiegati passo passo tutti i passaggi da fare per implementare determinate modifiche a chi si affida a Blogger, una delle piattaforme di blogging più comuni. In alternativa puoi contattarmi per una consulenza compilando il form sottostante. Sarà un piacere aiutarti.