Come assegnare lo stile alle pagine Web

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 fogli di stile; curarne il design del sito lo rende più attraente per il visitatore. Un sito curato nello stile 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 può assegnare con il CSS (Cascadig style Scheets)! Questa operazione 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à e gestione del design. Con i fogli di stile; possiamo creare delle classi e richiamarle 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 direttamente lo stile nelle pagine Web

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.

Impostare gli stili di una pagina HTML

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 di rispettare per quanto riguarda le precedenze:

  • I valori assegnati direttamente tra i TAG hanno la precedenza assoluta su tutti gli altri.
  • Gli attributi di stile assegnati tra gli <head> hanno la precedenza su quelli richiamati esternamente; tranne che per quelli impostati direttamente tra i TAG nel BODY interni alla pagina Web.
  • I fogli di stile di una pagina Web richiamati tramite “link rel” non hanno precedenza ne sugli stili tra i tag del BODY e ne su quelli assegnati nel tag HEAD interni alle pagine Web.
Come assegnare lo stile alle pagine web
CSS – Cascading style sheets

Consigli per migliorare lo stile delle 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.