Come assegnare lo stile alle pagine Web

Iniziando ad apprendere il linguaggio html tra le prime cose che ci salta in mente è come assegnare lo stile alle pagine Web. Anche se è possibile creare un sito facendo a meno dei CSS, stilizzare il sito lo rende più attraente per il visitatore. Un sito curato bene nel design riesce a rendere l’esperienza utente più piacevole e ad invogliarlo a ritornare; ovvio che la parte da leone è svolta dai contenuti ma tranne in casi particolari la componente del design è indispensabile.

come assegnare lo stile alle pagine web

Introduzione ai fogli di stile

Lo stile di un sito si assegna con i CSS (Cascadig style scheets), a differenza di una formattazione primitiva, rigida, limitata e diretta trai tags HTML; offrono invece una maggiore flessibilità e gestione del design. Con i CSS (fogli di stile) possiamo creare delle classi e richiamarle a nostro piacimento senza dover riscrivere nuovamente il codice o fare il copia e incolla per ogni sezione di una pagina Web.

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 alle nostre pagine possiamo farlo nei tre modi seguenti.

Come inserire lo stile nelle pagine Web diretto

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 oro con la scritta titolo di colore rosso.

Impostare gli stili di una pagina HTML

Il  metodo abbastanza diffuso per impostare lo stile di una pagina HTML è quello di inserendo il riferimento ai tags nel marcatore head:

<head>
  <style>
   h1{color: green; background-color: gold;}
  </style>
</head>

Così facendo tutte le volte che nel body inseriremo un tag <h1> verrà evidenziato con lo sfondo oro e la scritta di colore rosso senza dover ogni assegnare nuovamente lo stile ma farlo solo personalizzando singole sezioni in modo diretto.

CSS esterni con link rel

La tecnica più diffusa per stilizzare le pagine Web è quella di includere i fogli di stile esternamente richiamandoli tramite l’head. Creiamo un foglio di stile di esempio, o meglio (un file css) style.css ed assegniamo delle proprietà ai tags per i titoli e i paragrafi; poi creiamo un file prova.html che useremo per richiamare tramite il marcatore head.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

i due file in questo caso devono essere posizionati nella stessa directory per funzionare.

Richiamare i fogli di stile con @import

Per importare esternamente i fogli di stile per un sito o una pagina Web si può utilizzare anche la sintassi (@import). Questo tipo di approccio solitamente è utilizzato per progetti di grandi dimensioni come delle vere e proprie applicazioni Web; di seguito l’esempio per effettuare questa operazione per un link relativo e assoluto:

<style>
@import "mystyle.css";
</style>

<style>
@import url("http://miosito/mystyle.css");
</style>

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:

  1. I valori assegnati direttamente tra i TAGS hanno la precedenza assoluta su tutti gli altri.
  2. I valori assegnati tra gli < head> hanno la precedenza su tutti gli altri richiamati esternamente ma non sui valori assegnati direttamente tra i TAGS interni alla pagina Web.
  3. Gli attributi sullo stile di una pagina Web richiamati esternamente non hanno la precedenza ne sui valori assegnati nel marcatore head, ne su quelli impartiti direttamente tra i tags interni alle pagine Web.

Conclusioni e consigli

A questo punto dovresti sapere “come assegnare lo stile alle pagine web” ma sarebbe meglio approfondire, prima di creare il tuo primo sito Web.