Iniziando a studiare il linguaggio HTML sorge spontaneo chiedersi come assegnare lo stile alle pagine Web. Anche se è possibile creare un sito facendo a meno dei CSS e fogli di stile. Un sito curato nel design rende l’ esperienza utente più piacevole ed invoglia a ritornarci; ovvio che la parte da leone è svolta dai contenuti ma tranne in casi particolari la componente “stile di un sito”, è indispensabile.
I CSS
Lo stile di un sito lo si assegna con il CSS che sta per (Cascading Style Sheets)! Non è un vero e proprio linguaggio di programmazione perché si limita solo alla formattazione di una pagina Web. Con l’ uscita del CSS3 ed HTML5 è possibile fare cose più evolute che vanno oltre la semplice formattazione; quindi possiamo affermare che il CSS3 è l’ anticamera del JavaScript. L’ inserimento del codice CSS in un file HTML si può effettuare in tre modalità diverse:
- Direttamente negli elementi HTML
- Nel tag Head della pagina Web o Sito
- In un file separato richiamato con l’ elemento Link Rel HTML.
A differenza di una formattazione diretta tra i Tag HTML; i fogli di stile consentono una maggiore flessibilità ed una migliore gestione del codice. Con i fogli di stile; possiamo creare delle classi e richiamarle nel file HTML senza dover riscrivere nuovamente il codice o fare copia e incolla in ogni singola pagina Web del sito.
Come assegnare lo stile alle pagine Web
Dopo una breve introduzione sui fogli di stile che servono ad abbellire le pagine Web del nostro sito; vediamo adesso come assegnare lo stile alle pagine Web. Il CSS non è un vero linguaggio di programmazione perché come per l’ html la definizione più appropriata e quella di metalinguaggio; per assegnare in modo diretto o richiamare esternamente i fogli di stile nelle nostre pagine possiamo farlo nelle tre seguenti modalità.
Inserire il codice CSS nel body del file HTML
Possiamo inserire lo stile nelle pagine Web tra i tags, indipendentemente come mostrato di seguito:
<h1 style="color:red; background-color:gold">TITOLO </h1>
abbiamo assegnato al titolo di una ipotetica pagine web: uno sfondo di colore giallo con il font di colore rosso.
Assegnare lo stile in una pagina WEB
Il metodo abbastanza diffuso per impostare lo stile di una pagina HTML è quello di inserire il riferimento tra i tags nel marcatore head:
<head> <style> h1{color: green; background-color: gold;} </style> </head> Così facendo, tutte le volte che nel body della pagina inseriremo un tag <h1> verrà evidenziato con lo sfondo oro e con il font di colore verde; senza dover ogni volta assegnare nuovamente lo stile ma farlo solo quando personalizziamo singole sezioni con un ID o una classe differente.
CSS esterni con link rel HREF
La tecnica più diffusa per stilizzare le pagine Web è quella di richiamare i fogli di stile esternamente; tramite l’ head. Creiamo un un file CSS “style.css” ed assegniamo delle proprietà e degli attributi per i tag di titoli e paragrafi; poi creiamo una pagina html che useremo per richiamare il foglio di stile.
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
i due file “HTML” & “CSS” in questo caso devono essere posizionati nella stessa directory per funzionare. Oltre ai fogli di style posizionati sul nostro server; si possono richiamare anche esternamente al nostro! Un tipico esempio è quello di reperire i CSS dalle CDN (Content delivery network).
Richiamare i fogli di stile con @import
Per importare i fogli di stile in un sito o una pagina Web si può utilizzare anche la sintassi (@import). Questo tipo di approccio solitamente è utilizzato per richiamare parti di template in applicazioni Web e APP. Di seguito un esempio per effettuare questa operazione sia per un link relativo che assoluto:
<head> @import "mystyle.css"; </head> <head> @import url("http://miosito/mystyle.css"); </head> Precedenze per le regole di stile
Le direttive impartite allo stile di una pagina Web con i CSS hanno delle regole che vanno rispettate; per quanto riguarda le precedenze:
- Il codice CSS inserito direttamente tra i TAG ha la precedenza assoluta su tutti gli altri.
- Le regole di stile inserite nell'<head> hanno la precedenza sui fogli di stile richiamati esternamente.
- I fogli di stile CSS richiamati in una pagina Web tramite “link rel”; non hanno precedenza ne sul codice CSS inserito tra i TAG del BODY e ne su quello nel tag HEAD.
Consigli per assegnare lo stile alle pagine Web
A questo punto hai iniziato a capire “come assegnare lo stile alle pagine web” ma sarebbe meglio approfondire, prima di creare il tuo primo sito Web.