*Linux Guide

Fare Web - I nemici dei CSS

Ci sono sostanzialmente tre nemici dei CSS, nemici che ne causano una diffusione impropria o incompleta o tardiva:

  1. Gli Editor HTML WYSIWYG o visuali
  2. I Disegnatori di pagine web
  3. I Browsers
Andremo ad illustrare i motivi di tale inimicizia.

Nemico n° 1 - Gli Editor HTML

Come avrete modo di leggere in queste pagine, l'uso dei CSS per la realizzazione di layout ideali e belli, è cosa buona e giusta, tuttavia occorre fare mente locale ad un fenomeno.
Le Raccomandazioni relative ai CSS sono state divulgate per la prima volta nel lontanissimo (per i tempi del web) 1996 e sottoposte a revisione l' 11 gennaio del 1999, eppure la consultazione di numerosi siti web, mette in risalto il fatto che la stragrande maggioranza di essi fa un uso dei CSS in modo non proprio ideale, anche se la tendenza ha intrapreso un'inversione.
Mi riferisco all'uso di CSS in files esterni alla singola pagina, modalità assolutamente raccomandabile e caldeggiata dallo stesso W3C. La maggior parte dei webdesigner ricorre al collaudato e difficoltoso sistema di inserire gli stili inline, ovvero dichiarare le proprietà dell'elemento HTML contestualmente ad esso, come illustrato nel box sottostante.


<p style="color : #000">Questo è uno stile contestuale</p>

Questa metodica ha un vantaggio e molti difetti.
Il vantaggio è quello per il quale il designer, attraverso la funzione "normal" del suo editor HTML, vede il risultato immediatamente mentre realizza la pagina stessa, mentre impiegando un CSS esterno, ogni volta che apporta una modifica al medesimo, deve poi aprire il browser per vedere l'effetto. Gli editor WYSIWYG sono deleteri relativamente a ciò, infatti con la loro amichevole e pratica barra degli strumenti e delle formattazioni, consentono al, e portano il, designer a disinteressarsi del codice, generando così un listato spesso lunghissimo, pieno di ridondanze, errori, falsi annidamenti ed altre amenità del genere.
Sul piano della facilità di realizzazione, il Foglio di Stile esterno è più difficile da produrre, richiede più rigore e più preparazione e gli editor visuali, non vanno molto d'accordo con i CSS esterni.

I difetti degli stili contestuali sono fondamentalmente due. Il primo è dato dal fatto che si produce un codice HTML complesso, lunghissimo e difficile da modificare. Il secondo è determinato dal fatto che gli stili contestuali sono propri di quella sola pagina e non si applicano in ogni caso alla pagina successiva o precedente nell'albero del sito.
Si può affermare che uno dei nemici principali dei Fogli di Stile, è l'editor HTML di tipo visuale. Occorre infatti capire che produrre una pagina web non è come produrre un semplice documento di testo, nel quale le formattazioni si aggiungono e si tolgono con disinvoltura perchè il loro fine ultimo è la lettura diretta e/o la stampa. Una pagina web ha un codice particolare che veicola delle informazioni e per essere consultata deve prima essere elaborata da uno strumento, che si chiama browser, che nel fare ciò potrebbe avere difficoltà determinate proprio dal codice originario con il quale è stata costruita tale pagina.
Il rigore con il quale viene realizzata la pagina è direttamente collegato al suo controllo in fase di costruzione, controllo che richiede la conoscenza delle regole su cui si basa il codice stesso. Un editor visuale applica queste regole senza logica e, spesso, applica proprie regole che non collimano con quelle ufficiali inserite nei browsers (ad eccezione di Internet Explorer che non ha regole!).
In altre parole un editor visuale si comporta come un editor di testo e questo favorisce il comportamento per il quale, se nel contesto di una frase si vogliono sottolineare, colorare e rimarcare precise parole, lo si fa direttamente su ogni singola parola, generando un codice complesso e pieno di ridondanze in quanto si ripetono le stesse informazioni ogni volta come si vede in questa pagina, quando con un CSS ben impostato si potrebbe evitare tutto ciò come illustrato in quest'altra pagina

Dall'analisi dei codici delle due pagine di esempio si nota come il codice html sia più semplice nella seconda, ma la cosa bella non sta solo nella semplicità del codice, ma nell'estensibilità di quanto contenuto nello stile esterno all'elemento stesso.
Per ogni singola parola che sarà targata con il tag <em>, come illustrato nel codice della seconda pagina di esempio, compariranno le stesse caratteristiche cromatico-strutturali, mentre con il primo sistema dovremo ogni volta apportare le formattazioni desiderate badando bene a non sbagliare.

Esempio
Supponiamo che una fabbrica produca diversi tipi di bulloni ottenuti da pezzi di ferro quadrati e sferici.
Con il sistema contestuale di cui abbiamo parlato sopra, l'operaio che produce i bulloni, si troverebbe ad avere, per ogni singolo pezzo di ferro, un foglietto di istruzioni indicante le caratteristiche che dovrà avere quel singolo bullone ottenuto da ogni singolo pezzo di ferro, quadrato o sferico che sia. Sarà costretto a leggere ogni singolo foglietto, altrimenti non potrà mai sapere se dieci bulloni vanno così e altri dieci, così. Un lavoro di proporzioni monumentali ed una predisposizione all'errore molto alta.

Con il sistema dei CSS, invece, l'operaio riceverebbe un singolo foglietto che indicherebbe che tutti i pezzi di ferro quadrati dovranno produrre un bullone fatto così, mentre da quelli sferici dovrà uscire un bullone fatto così. Un lavoro immensamente più semplice e praticamente privo di errori!

Il terzo difetto è dato dalla estemporaneità del sistema contestuale, mentre l'enorme pregio del sistema dei CSS è dato dalla sistematicità cronologica.
Discutiamo di questi due punti cruciali.

Se applichiamo una formattazione contestuale ai vari elementi di due pagine, il browser legge la pagina successiva, senza avere memoria di quella precedente, anche se quest'ultima è identica alla successiva. Questo perchè la cache memory, che gli consente di ricordarsi di quello che ha già visto, è vuota. Ne deriva che il caricamento delle pagine è più lungo in quanto il browser prima carica la struttura, poi carica le varie proprietà di layout leggendole da capo ogni singola volta, poi carica i contenuti di una pagina, poi dovrebbe rifare tutto per quella successiva e così via.
Se impiegassimo, invece, il sistema dei CSS esterni, accadrebbe che il browser dapprima leggerebbe il CSS (perchè il collegamento ad esso si trova nella testa della pagina, quindi prima di tutto il resto) e le proprietà di layout e le inserirebbe nella sua cache memory conservandole a lungo, poi caricherebbe la struttura, poi i contenuti. Alla pagina successiva, dovrebbe caricare solo la struttura e i contenuti e così per tutte le pagine successive e precedenti. Uno sforzo minimo se paragonato a quello descritto in precedenza.

Esempio
Ritornando all'esempio dei bulloni fatto in precedenza, supponiamo che l'operaio abbia a che fare con scatoloni di pezzi di ferro assolutamente uguali tra loro, cioè contenenti pezzi di ferro un po' quadrati e un po' sferici.
Nel caso del sistema contestuale, egli si troverebbe a dover leggere le istruzioni su ogni scatolone che gli direbbero che i pezzi di ferro sono un po' quadrati e un po' sferici e che di ogni pezzo, deve leggere il foglietto di istruzioni. Un lavoro titanico e inutile.
Nel caso dei CSS, l'operaio leggerebbe un solo foglio di istruzioni relativo a tutti gli scatoloni e, del contenuto di ognuno di essi, leggerebbe un solo foglio di istruzioni. Un lavoro immensamente più semplice e produttivo.

Quindi tiriamo delle somme relativamente ai danni inferti all'uso corretto e proficuo dei Fogli di Stile, da parte degli editor visuali.
Innanzitutto gli editor visuali facilitano in modo negativo la realizzazione di pagine web e questo fa si che il sedicente webdesigner si senta autorizzato a non sapere nulla di Linguaggio di Marcatura.
Secondariamente gli editor visuali hanno una interfaccia molto simile, o troppo simile, a programmi usati per la produzione di testi e questo lascia intendere al designer, che realizzare una pagina web sia uno scherzetto come scrivere una lettera.
Poi gli editor visuali, specie quelli prodotti da Microsoft nelle varie versioni, hanno il vizio di inserire marcatori fantasiosi o non tollerati dalle direttive ufficiali, producendo codici non validi per definizione. Molti marcatori hanno solo funzioni estetiche o producono effetti dinamici nemmeno tanto simpatici o utili (il tag <marquee> prodotto da Microsoft, è un esempio negativo sia al riguardo della validità del codice, sia dal punto di vista dell'accessibilità come descritto al Punto di Controllo 7.3 delle Priorità 2 delle Linee Guida sull'Accessibilità emanate dal Web Accessibility Initiative nella versione 1.0.).
Poi gli editor visuali sono in possesso di una loro precisa funzione di Anteprima che spesso non corrisponde a quello che in effetti i browsers di più largo impiego visualizzano. Il designer si trova quindi spiazzato quando vede che la pagina, nell'editor si vede bene e nel browser no.

Nemico n° 2 - Il Disegnatore di pagine web

Ci sono sostanzialmente tre tipi di WebDesigner, che poi molto spesso si identificano nel WebMaster:

  1. Il Professionista
  2. Il Cultore
  3. Il Dilettante
Analizziamo queste tre figure del WebAuthoring.

Il Professionista è colui che di professione costruisce pagine web, siti, portali, ecc., ecc. Guadagna dal fare tutto ciò ed è costantemente alla ricerca di nuovi contratti. Ha una preparazione adeguata e spinge massimamente sulla grafica e l'impatto visivo delle sue realizzazioni.
Il Cultore è colui che di mestiere fa un altra cosa, ma ama molto la tecnologia che sta dietro alle pagine Web, ama la conformità, la purezza e la perfezione. Costruisce pagine web per diletto o per motivi quasi mai legati al commercio e lo fa seguendo con scrupolo i dettami ufficiali, usa tecnologie moderne, si attiene alle procedure ed è interessato più a quello che non si vede (codice) che a quello che si vede (grafica). Usa strumenti fuori dal comune e tecnologie originali e le sue realizzazioni sono il più delle volte semplici e spartane. Ha un sito personale sul quale riversa energie e risorse e la cui conformità è una meta da raggiungere assolutamente. In genere conosce a menadito regole e regolette dell'(X)HTML, dei CSS, dell'Accessibilità , dei linguaggi di scripting e dell'interattività.
Il Dilettante è colui che ha una attività commerciale, o un idea o un ego esagerato e decide che la rete è un grande contenitore di spot e colori, per cui ritiene che costruirsi un sito sia una necessità e un dovere.
Prende il primo Editor HTML che gli capita sullo schermo (di solito Front Page di Microsoft) e butta giù immagini su immagini, qualche riga di testo e links generici (come "clicca qui", "entra", "accedi").

All'apparenza si potrebbe affermare che il professionista sia il soggetto più indicato alla realizzazione di pagine web adeguate, relativamente all'uso dei CSS, ma raramente è proprio così
Il professionista punta al guadagno e questo lo porta ad avere fretta, a stupire i clienti con una grafica spinta, ricercata e molto bella, a tagliare corto in materia di usabilità e accessibilità. Ama usare strumenti che gli facilitino la vita anche a costo di rinunciare alla conformità, come il costoso DreamWeaver (l'Editor visuale più agognato e crakkato del web) con il quale applica il sistema degli stili contestuali e il complicato Flash di Macromedia con il quale realizza filmati pressochè sempre inaccessibili e pesantissimi.
Insomma il professionista vuole clienti e raramente si dimostra rispettoso delle direttive, raramente propenso ad impiegare il codice con rigore e logica, e quasi mai previdente riguardo all'accessibilità ed agli sviluppi futuri del web.
Purtroppo oggi si ritiene che il vero professionista del web sia colui che sa usare Flash, DreamWeaver e PhotoShop, ma non si richiede mai che il professionista conosca le direttive riguardanti l'Accessibilità, l'uso corretto dell'(X)HTML e dei CSS. Si può onestamente affermare che il professionista o, per meglio dire la professione di webdesigner, specie se inserita nell'esoso mondo dell'e-commerce, sia un nemico dell'uso proficuo dei CSS.

Nemico n° 3 - I Browsers

Sono abbastanza lontani i tempi dei browsers di quarta generazione (Internet Explorer 4 e Netscape Navigator 4.7) che se ne infischiavano letteralmente dei CSS, eppure ancora oggi c'è una consistente e dura fetta di utenti del web che usa questi strumenti arcaici.
Oggi siamo giunti ad un punto tale che, ad eccezione del solito pestifero Internet Explorer, tutti i browsers moderni supportano e applicano correttamente i codici CSS e permettono al designer di avere sempre sotto controllo la situazione di raggiungere una adeguata e tranquilla compatibilità crociata.

Una cosa però è certa. Internet Explorer ha una interpretazione dei CSS che si allontana qualche volta dalla logica e dalle regole ufficiali.
Il riferimento è chiaramente rivolto ai noti problemi di interpretazione dei box model, per cui Internet Explorer 5.5 (ancora implementato radicalmente su Windows 98, diffuso ancora moltissimo nei vari PC) per Windows, considera l'ampiezza di un box compresi padding, bordi e margin. Questo fa si che il designer vada in avaria quando, dopo aver provato con soddisfazione la sua pagina su I.E. 5.5, scopra disastrosamente che su I.E. 6, su Mozilla e su Opera, la pagina è devastata da problemi di allineamento.
Non è questa la sede per esporre le soluzioni, ma lo è per dire che, malgrado una adeguata conoscenza dei CSS ed una loro altrettanto adeguata utilizzazione, ci possono essere dei problemi che, un designer ignaro, potrebbe non riuscire a risolvere credendo di avere commesso delle sciocchezze nella struttura dei CSS, quando invece queste sono state commesse dai progettisti di un browser che, malgrado sia il più diffuso e impiegato, è dimostratamente il peggiore che si possa installare in un computer.
Non va dimenticato che anche altri browsers hanno problemi di interpretazione dei CSS e di solito sono versioni vecchie di browsers ottimi come Opera.

Purtroppo un designer coscienzioso dovrebbe tenere in considerazione tutte queste cose, donando alle pagine, quella retrocompatibilità che permetta agli utenti nostalgici di vedere correttamente la pagina con dinobrowsers.
Abbiamo quindi visto come uno dei più acerrimi nemici dei CSS, potrebbe essere quello strumento che, più di ogni altro dovrebbe sfruttarne i più preziosi contenuti.

Contrastare i nemici dei CSS

Ci sono molti modi di difendersi dai nemici, ma qui affrontiamo quelli relativi ai CSS. Risaliamo quindi ai tre nemici di cui abbiamo parlato in precedenza :

  1. Editor WYSIWYG o Visuali
  2. WebDesigner
  3. Browsers
Purtroppo non è possibile rimediare alle inimicizie legate ai WebDesigner ed ai browsers, per cui ci rimane solo il cercare di impiegare gli Editor HTML nel miglior modo possibile mantenendo logica e conformità nella costruzione delle pagine web.

L'uso corretto dei CSS non prescinde dall'uso di editor visuali, solo che il loro uso deve avvenire sfruttando molto più del solito la funzione "Show HTML", o "View Source", o "Visualizza Sorgente", o "HTML Mode", ovvero quella funzione che consente al designer di controllare il codice (X)HTML della pagina che si sta realizzando.
Purtroppo nelle riviste specializzate compaiono dei CD dove si regala un editor visuale con la dicitura tranquillizzante "Non è necessario conoscere una sola riga di HTML", oppure "Non si deve controllare il codice!". Sbagliato!!!
Il codice si DEVE controllare, se ne DEVE avere il completo controllo!
Partiamo quindi da un esempio pratico.

Supponiamo di volere una pagina in cui compaiano i soliti elementi strutturali :
- Testata
- Colonna sinistra
- Colonna centrale con i contenuti
- Colonna destra
- Pie di pagina
Naturalmente gli editor visuali stimolano alla realizzazione attraverso l'uso delle tabelle, scelta deprecata dal W3C, ma non proibita di fatto. Daremo quindi delle dimensioni alla tabella per farla comparire al centro e la stessa cosa faremo con le varie celle che la compongono. Vorremo naturalmente conferire delle colorazioni e delle rifiniture adeguate e potremmo avere necessità di inserire delle immagini.
Con il nostro editor visuale e con la solita tecnica degli stili contestuali, produrremo il seguente codice:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<html>
<head>
<title> </title>
</head>
<body bgcolor="#cccccc">
<center>
<table width="760" cellspacing="0">
<tbody>
<tr>
<td colspan="3" height="75" bgcolor="#8089ac" style="margin : auto; border-width : 1px; border-style : solid; border-color : #006;padding : 10px;text-align : left;">
<font color="#000099" size="+3" face="Arial">Titolo </font>
</td>
</tr>
<tr>
<td width="130" bgcolor="#b8b8dc" style="margin : auto;border-width : 1px;border-style : solid;border-color : gray;padding-top : 5px;" align="center" valign="top">
<font color="#000000" size="+0" face="Arial"> <b>Men? principale </b> </font> </td>
<td width="500" bgcolor="#ffffff" style="padding : 5px;margin : auto;border-width : 1px;border-style : solid;border-color : #000;"> <font color="#ff0000" size="+2" face="Arial Black" style="text-align : left;">Questa ? l'area riservata al testo </font>
<font color="#000099" size="+0" face="Arial" style="text-align : left;"> <br>
Questa l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta </font>
</td>
<td width="130" bgcolor="#b8b8dc" style="margin : auto;border-width : 1px;border-style : solid;border-color : gray;padding-top : 5px;" align="center" valign="top">
<font color="#cc0000" size="+0" face="Arial"> <b>Colonna degli Avvisi </b> </font>
</td>
</tr>
<tr>
<td colspan="3" height="75" bgcolor="#8089ac" style="margin : auto;border-width : 1px;border-style : solid;border-color : #006;font-weight : 400;padding-right : 10px;text-align : right;">
<font color="#000099" size="+2" face="Arial">Pie di pagina </font>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

Che potremo vedere operativo in questa pagina

Ora, invece, senza mollare il nostro editor visuale (Front Page, DreamWeaver, Namo, Golive, o altro) procediamo a produrre la stessa pagina con l'uso di un CSS esterno, cioè alloggiato nella stessa directory della pagina ma non al suo interno. Per fare ciò dovremo dapprima nominare i vari elementi della pagina, quindi :
- Tabella = generale
- Testata = testata
- Colonna sinistra = colsin
- Colonna centrale con i contenuti = colcen
- Colonna destra = coldes
- Pie di pagina = piede
Applicheremo questi nomi al codice con l'attributo 'id' in modo che non sia possibile confondere gli elementi nelle attribuzioni delle caratteristiche. Osservate quindi il box sottostante.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<html>
<head>
<title> </title>
<link rel="stylesheet" media="screen" href="style.css" type="text/css" title="Il foglio di stile" />
</head>
<body>
<center>
<table id="generale">
<tbody>
<tr>
<td id="testata" colspan="3">Titolo</td>
</tr>
<tr>
<td id="colsin">Menù principale</td>
<td id="colcen"><h1>Questa ? l'area riservata al testo</h1>
<p>
Questa l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta l'area riservata al testoQuesta</p>
</td>
<td id="coldes">Colonna degli Avvisi</td>
</tr>
<tr>
<td colspan="3" id="piede">Pie di pagina</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

Da notare la parte evidenziata che rappresenta il collegamento al foglio di stile che contiene tutte le caratteristiche di aspetto dei vari elementi. Naturalmente, mancando tutte le caratteristiche di layout, la pagina risulterebbe composta solo da del testo senza nessuna formattazione. Quindi andremo a scrivere le caratteristiche nel CSS che inseriremo nella testa della pagina come illustrato sotto. Per farlo dovremo aprire un normalissimo foglio del blocco note, sul quale inseriremo i dati descritti sotto.


body{margin : 0;
padding : 2%;
background : #ccc;
font-family : arial,verdana,sans-serif;
color : #000;
}

e con questo avremo fatto in modo che la pagina si collochi al centro e che tra i bordi dello schermo e la parte grafica della pagina ci sia un margine vuoto di colore grigio chiaro. Avremo anche stabilito che il colore dei caratteri sia nero e che il tipo di font sia arial, oppure verdana o altro font senza le grazie. Siccome "body" è il progenitore di ogni altro elemento della pagina e le caratteristiche elencate verranno ereditate dagli altri elementi.
Proseguiamo con la tabella, cioè la struttura portante della pagina.


#generale{padding : 0;
margin : 0;
border : none;
}

Poi proseguiamo con la testata, dove accoglieremo un eventuale logo, dove sarà scritto il titolo e dove potremo eventualmente mettere un banner di nostro gradimento.


#testata{height : 75px;
background : #8089ac;
border : 1px solid #006;
padding : 10px;
text-align : left;
font-size : 150%;
color : #009;
}

Poi procediamo a stabilire le caratteristiche della colonna sinistra.


#colsin{width : 20%;
margin : 0;
padding-top : 5px;
background : #b8b8dc;
border : 1px solid #666;
font-weight : bold;
vertical-align : top;
text-align : center;
}

Poi procediamo a stabilire le caratteristiche della colonna centrale e del capitolo.


#colcen{width : 60%;
margin : 0;
padding : 5px;
background : #fff;
border : 1px solid #000;
color : #009;
text-align : left;
vertical-align : top;
}

h1{font : 150% "Arial Black";
color : #f00;
}

Quindi proseguiamo con le caratteristiche della colonna destra.


#coldes{width : 20%;
margin : 0;
padding-top : 5px;
background : #b8b8dc;
border : 1px solid #666;
font-weight : bold;
vertical-align : top;
text-align : center;
color : #cOO;
}

Infine procediamo ad elencare le caratteristgiche del pie di pagina.


#piede{height : 75px;
background : #8089ac;
border : 1px solid #006;
padding : 10px;
text-align : right;
font-size : 150%;
color : #009;
}

Quindi il foglio di style sarà così strutturato :


<-- Questo è il foglio di stile di questa pagina -->
body{margin : 0;
padding : 2%;
background : #ccc;
font-family : arial,verdana,sans-serif;
color : #000;
}

#generale{padding : 0;
margin : 0;
border : none;
}

#testata{height : 75px;
background : #8089ac;
border : 1px solid #006;
padding : 10px;
text-align : left;
font-size : 150%;
color : #009;
}

#colsin{width : 20%;
margin : 0;
padding-top : 5px;
background : #b8b8dc;
border : 1px solid #666;
font-weight : bold;
vertical-align : top;
text-align : center;
}

#colcen{width : 60%;
margin : 0;
padding : 5px;
background : #fff;
border : 1px solid #000;
color : #009;
text-align : left;
vertical-align : top;
}

h1{font : 150% "Arial Black";
color : #f00;
}

#coldes{width : 20%;
margin : 0;
padding-top : 5px;
background : #b8b8dc;
border : 1px solid #666;
font-weight : bold;
vertical-align : top;
text-align : center;
color : #cOO;
}

#piede{height : 75px;
background : #8089ac;
border : 1px solid #006;
padding : 10px;
text-align : right;
font-size : 150%;
color : #009;
}

Ora salviamo questo scritto nella stessa directory nella quale avremo salvato la pagina e nomineremo questo CSS "style.css".
Quindi dovremo fare una prova lanciando il browser e aprendo la pagina. Se tutto è stato fatto bene la pagina dovrebbe avere questo aspetto.

Dove sta il vantaggio del secondo sistema sul primo?
Il links inserito nella testa della pagina e che richiama le informazioni contenute nel CSS, si può applicare ad ogni pagina del sito e si avranno le stesse visualizzazioni per ognuna di esse. Quindi il singolo foglio di stile può essere applicato a centinaia di pagine.
Con il primo sistema, è necessario ripetere le stesse cose per ogni singola pagina inserita nel sito. Nel caso che si voglia applicare una modifica ad ogni pagina, sarà quindi necessario aprirle tutte, una per una e applicare la singola modifica. Con l'uso del CSS esterno basterà applicare la modifica al medesimo e di colpo tutte le pagine riceveranno la modifica.
Abbiamo quindi visto che pur impiegando il nostro editor HTML preferito, saremo stati in grado di sfruttare un modo migliore di gestire le pagine.

Linux Guide | Torna in alto