Come assegnare lo stile alle pagine Web

Iniziando ad apprendere 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 invece offrono 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 la scritta 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:

Conclusioni e consigli per migliorare 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.