Se sei arrivato a leggere questo articolo significa che hai già approfondito il discorso della struttura dei tag HTML e delle proprietà associate ai tag.
Hai visto che per formattare il testo all’interno dei tag HTML devi utilizzare l’attributo style. Immagina adesso di realizzare un intero sito web con tutte le pagine web che lo compongono e migliaia di tag HTML necessari per costruire le pagine. Per ogni tag html devi aggiungere l’attributo style con le relative proprietà per formattare il contenuto; solo per realizzare una pagina web sarebbe richiesto moltissimo tempo, pensa per realizzare un sito intero! E se hai creato un sito web con tutto il testo di colore blu e volessi modificarlo in rosso? Dovresti modificare tutti gli attributi di tutti i tag di tutte le pagine web! Un lavoro quasi impossibile.
La soluzione sono i CSS; attraverso i CSS è possibile creare degli stili da associare ai tag o a determinati classi di tag. Come sempre per imparare a programmare un qualsiasi codice è necessario testare il codice partendo da piccoli esempi e apportando tutte le modifiche necessarie per capire come funziona.
Partiamo da un semplice esempio:
<html>
<head>
<style>
p {
color: red;
font: 36px;
}
</style>
</head>
<body>
<p>prova 1</p>
<p>prova 2</p>
</body>
</html>
Come puoi vedere in questo esempio introduciamo un nuovo tag “<head>” che andrà posizionato prima del tag “<body>”. Il tag in questione racchiude elementi che servono per indicare qualcosa di “extra” che deve interpretare il browser nel momento in cui andrà a visualizzare la pagina html.
All’interno del nuovo nostro nuovo tag “<style>” c’è il nome di un tag html “p”, seguito da parentesi graffe e da due proprietà (color e font). Questo, in poche parole, significa che tutti i tag <p> presenti nella pagina HTML dovranno essere formattati secondo le proprietà impostate all’interno delle parentesi graffe.
L’esempio analizzato visualizzerà il seguente testo:
prova 1
prova 2
Attenzione, nell’esempio l’attributo style non lo trovi più come attributo del tag <p> ma come tag html!
Questa modifica è proprio ciò che permette di realizzare i CSS e di rispondere alle nostre domande iniziali. Infatti, se necessitiamo di variare il colore di tutto il testo, non è necessario andare a modificare tutte le proprietà degli attributi style all’interno di ogni singolo tag ma è sufficiente modificare la sola proprietà color del singolo tag <style> presente nella sezione head della pagina.
Se provi a modificare il colore del codice da “red” a “yellow” il risultato sarà il seguente:
prova 1
prova 2
Modificando la sola proprietà iniziale hai modificato contemporaneamente lo stile di due paragrafi, o ancora meglio hai modificato lo stile di tutti i paragrafi aventi tag <p>.
Prova a fare diverse modifiche aggiungendo altri tag al codice di esempio e aggiungendo altri attributi corrispondenti ai tag che hai aggiunto per capire bene come funziona il codice.
Un secondo esempio potrebbe essere il seguente:
<html>
<head>
<style>
p {
color: red;
font: 36px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<p> paragrafo 1</p>
<h1> titolo 1 </h1>
<p>paragrafo 2</p>
<h1> titolo 2 </h1>
</body>
</html>
Il risultato sarà:
paragrafo 1
titolo 1
paragrafo 2
titolo 2
Modificando lo stile impostato negli attributi del CSS (sezione <style> nell’head della pagina), modificherai lo stile dei corrispondenti tag del codice HTML.
Il secondo esempio è solo per mostrare come effettuare ulteriori prove per comprendere bene il funzionamento del codice.
Nei nostri esempi il CSS è stato integrato direttamente nella sezione <head> della pagina HTML; noi però stiamo lavorando con una sola pagina html (per intenderci il nostro file primapagina.html). In generale un sito web contiene diverse pagine HTML; per poter formattare diverse pagine web con un solo CSS, il codice dello stesso CSS deve essere posizionato all’esterno delle singole pagine.
Iniziamo sempre da un esempio; crea una seconda pagina html e salvala con il nome “secondapagina.html”. Questa volta però anziché utilizzare blocco note di Windows utilizza l’editor HTML che hai installato precedentemente. A seconda dell’editor installato ci sarà un percorso diverso per creare il file però, in generale, ci dovrebbe essere qualcosa come “file-> crea nuovo -> documento html” e una volta scelto il nome (secondaprova.html) salva il file nel percorso dov’è presente il primo file utilizzato finora per fare i vari esempi (primapagina.html).
Inserisci quindi il codice seguente nel file creato:
<html>
<head>
<style>
p {
color: green;
}
</style>
</head>
<body>
<p> seconda pagina web! </p>
</body>
</html>
Nella “primapagina.html” aggiungi un link che rimanda alla “secondapagina.html”; basta aggiungere il tag di seguito:
<a href=”C:\miopercorso\secondapagina.html”> apri seconda pagina</a>
Adesso se vai ad aprire la prima pagina HTML con il nuovo tag sarà visualizzato il seguente link
apri seconda paginaA questo punto hai un primo documento HTML con al suo interno un link che apre una secondo documento HTML, quindi una seconda pagina web.
Le due pagine create adesso hanno entrambe il codice CSS integrato nella sezione <head>. Nella prima pagina il testo all’interno del tag <p> è impostato a “red”, nella seconda pagina invece è impostato a “green”. Se volessimo impostare il colore del testo di tutte le pagine a “blue” dovremmo andare ad aprire ogni singolo file HTML e modificare il colore nella sezione <style>.
Proprio per questo motivo è necessario portare il codice CSS all’esterno delle singole pagine, creando quindi un file con estensione .css e aggiungere un link che dalle singole pagine punti al file CSS creato.
Un esempio chiarisce sempre le cose.
Con l’editor che utilizzi crea un nuovo file di tipo CSS (es. fogliodistile.css) e salvalo nella cartella dove sono presenti i due file (primapagina.html e secondapagina.html).
Nel fogliodistile.css inserisci semplicemente il codice di formattazione. Ad esempio:
p {
color: green;
}
Modifica le pagine HTML sostituendo la sezione:
<style>…</style>
con:
<link rel=”stylesheet” href=”C:\percorsocartella\fogliodistile.css”>
Il nuovo codice sarà quindi così:
<html>
<head>
<link rel=”stylesheet” href=”C:\percorsocartella\fogliodistile.css”>
</head>
<body>
<p> prima pagina web! </p>
<a href=”C:\miopercorso\secondapagina.html”> apri seconda pagina</a>
</body>
</html>
Fai la stessa cosa anche nella seconda pagina.html.
A questo punto le due pagine web non avranno un CSS integrato ma faranno riferimento ad un CSS esterno.
Ovviamente a questo punto se vai a modificare il colore nel foglio di stile aggiornerai il colore di tutti i testi presenti nei tag <p> di tutte le pagine web che hanno il link che punta al foglio di stile creato.
Complimenti, hai creato il tuo primo CSS!
Come sempre per realizzare qualcosa è possibile farlo in diversi modi. Una seconda possibilità per formattare le nostre pagine web attraverso i CSS è utilizzare l’attributo class.
Vediamo un piccolo esempio. Partendo sempre dai file creato in precedenza aggiungi nel fogliodistile.css il seguente codice:
.classediprova {
color: Red;
}
E aggiungi nella pagina HTML il seguente codice:
<div class=”classediprova”> formattazione attraverso classe CSS </div>
<div class=”classediprova”> secondo testo con formattazione attraverso classe CSS </div>
In questo caso non saranno formattati i tag in base al nome impostato nel CSS ma saranno i tag che al loro interno conterranno l’attributo classe con all’interno il nome uguale al nome inserito nel CSS; nel nostro caso classediprova. Attenzione, nel file CSS le classi sono precedute da un punto (.classediprova).
Benissimo, hai realizzato i primi test su un documento CSS, puoi approfondire il discorso analizzando tutte le proprietà, anche relative al posizionamento nella pagina degli elementi; quello che ti consiglio in generale è di comprendere come è la struttura di un qualsiasi codice di programmazione e di approfondire successivamente nei dettagli ciò di cui necessiti realmente.
Il modo della programmazione è immenso e in continuo aggiornamento, dal mio punto di vista non serve essere un “manuale” di qualcosa di specifico, a meno che non ti serva per qualche valido motivo.
Non esitare a lasciare un commento o chiedere informazioni per chiarire i tuoi dubbi!