Collegare fogli di stile CSS all'HTML | Baleia - Comunicazione, tecnologie e Web per il non profit

L’avvento e la continua evoluzione del linguaggio CSS (Cascading Style Sheets) ha rappresentato una grande innovazione per i realizzatori di siti web. Una delle prime nozioni da imparare per usare in modo efficace le potenzialità di tale linguaggio è sapere come agganciare il foglio di stile alla pagina web. Esistono diversi sistemi.

Integrare CSS in una pagina HTML

Il primo è quello classico e pulito di creare un file esterno al documento e con estensione .css (o altri tipi di estensioni). Tale file, che si può creare con un qualsiasi programma per il web editing o con dei semplici editor di testo sarà richiamato dalla pagina html. Nella sezione <head> della pagina html occorrerà utilizzare il tag <link> nel seguente modo:

<head>
<title>Nome del sito</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>

In questo caso stiamo richiamando il foglio di stile denominato style.css. Ovviamente se esso è collocato in una cartella diversa, dovremo inserire il percorso corretto della cartella. Per esempio, se il file css si trova nella cartella /css il nostro codice sarà il seguente:

<head>
<title>Nome del sito</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>

Un secondo metodo per dare stile al nostro codice è quello di utilizzare la funzionalità @import. In genere, si ricorre a questo metodo per risolvere problemi di comaptibilità con i browser meno recenti. Il codice da incorporare in questo caso é:

<style>@import url(style.css);</style>

Una terza soluzione è quella di incorporare direttamente il foglio di stile nella sezione <head> della pagina htm, utilizzando il tag <style>l. Ecco come:

<head>
<title>Inserire i fogli di stile in un documento</title>
<style type="text/css">
body {
 background: #FF9900;
 background-image: url (http://www.nomesito.it/img/nomeimmagine.jpg)
}
</style>
</head>

L’ultima possibilità è quella di assegnare uno stile a singoli elementi html (div, strong, a, span, ecc) all’interno della pagina. Anche qui dovremo usare il tag <style>. Ecco come:

<strong style="color: green; background: yellow;">prova</strong>

Questa rapida guida sarà sicuramente utile a chi muove i primi passi nel campo del web design. Il nostro suggerimento è di mantenere il codice il più possibile possibile e di tenere separati il linguaggio CSS dal semplice HTML. Per queste ragioni vi consigliamo di adottare la prima delle quattro soluzioni qui proposte. Come sempre, Baleia è a disposizione per assistenza e consulenza.