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 CSS; curarne il design lo rende più attraente per il visitatore. Un sito curato nello stile 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.

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; i fogli di stile consentono una maggiore flessibilità e gestione del design. Con i fogli di stile “CSS”; possiamo creare delle classi e richiamarle a nostro piacimento senza dover riscrivere nuovamente il codice o fare copia e incolla in ogni pagina Web del sito.

Come assegnare lo stile alle pagine web
Immagine descrittiva di richiamo

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 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 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

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à e degli attributi per i tags di titoli e paragrafi; poi creiamo una pagina html che useremo per richiamare il foglio di stile dal 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 richiamare parti di template in progetti di grandi dimensioni; ed applicazioni Web. 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 assegnamento dello 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 TAGS hanno la precedenza assoluta su tutti gli altri.
  • Gli attributi assegnati agli stili tra gli < head> hanno la precedenza su tutti gli altri richiamati esternamente; tranne che per quelli inseriti direttamente tra i TAGS interni alla pagina Web.
  • I fogli di stile in una pagina Web richiamati esternamente non hanno la precedenza ne sui valori assegnati nel marcatore head; ne su quelli impartiti direttamente tra i TAG interni alle pagine Web.

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.