4 Metodi per aggiungere i CSS alle pagine HTML

Giorgio Borelli

Come inserire i fogli di stile nelle pagine webI Fogli di stile sono la tecnologia di riferimento per la realizzazione dei layout e della formattazione delle pagine web, per chi fà web, come i webdesigner o i webmaster, conoscerli è fondamentale, non fosse per altro che rappresentano lo standard imposto dal W3C per realizzare la struttura delle pagine web.

Un layout web realizzato con i CSS anzichè con le classiche tabelle HTML è impronta di professionalità e qualità del sito, oltre ovviamente a tutta una serie di vantaggi come l'indicizzazione, l'accessibilità, la manutenibilità, la pulizia del codice, la velocità del sito stesso. La filosofia che sta dietro i fogli di stile nasce dall'esigenza di avere un "linguaggio" distinto dall'HTML per strutturare e formattare i siti web, mentre l'HTML dovrebbe essere usato esclusivamente come markup per i contenuti, una tabella HTML serve per presentare dei dati in forma tabellare e non per suddividere le sezioni di una pagina web, ecco perchè sempre più il W3C impone l'uso dei CSS come standard, per radicare anche la mentalità che il codice (di formattazione o di programmazione) deve essere tenuto separato dal contenuto della pagina web.

Non voglio però entrare nella storia e nel merito dei CSS, sarebbe un argomento ben troppo lungo che esula dal nostro scopo, voglio fornirvi invece un'articolo che racchiude e spieghi le quattro tecniche  principali per inserire un foglio di stile all'interno delle pagine HTML, mostrando i vantaggi e gli svantaggi di ognuna di esse.

Le regole di stile dei CSS per il nostro sito web, possono essere scritte in un normalissimo file di testo con estensione .css e richiamato poi all'interno della pagina web, oppure inserito direttamente all'iiterno del codice della pagina, parleremo rispettivamente di fogli di stile esterni e fogli di stile interni. Fatta questa dovuta premessa, passiamo ad illustrare i 4 metodi per inserire un CSS nelle pagine Web.

 

1) Fogli di stile in linea

I CSS in linea rappresentano forse il modo più facile per applicare una regola di stile ad un tag HTML, infatti basta inserire la regola css all'interno di un qualsiasi tag HTML per vederla subito applicata a quell'elemento, ad esempio in questo modo:

<span style="font:Arial; font-size:medium; color:Red;">Hello Word!!!</span>

in questo esempio applichiamo un font Arial di dimensioni medie e colore rosso ad un semplice testo racchiuso nel tag span, niente di più facile.

Sebbene l'uso dei fogli di stile in linea sia semplice ed immediato il loro uso è fortemente sconsigliato, poichè non solo "sporcano" il codice della pagina, ma risultano poco uniformi e nel caso del cambio ad es. di un colore saremmo costretti a rivedere ogni singolo elemento html per tutte le pagine, per un sito di poche pagine ancora questo è possibile, ma per siti di grandi dimensioni capite bene che diventa un lavoro proibitivo. Il loro uso è da preferire solo in quei casi in cui dobbiamo modificare un singolo elemento o forzare una regola di stile presente su un foglio CSS esterno a cui non riusciamo ad accedere.

 

2) Fogli di stile incorporati

I CSS incorporati nella pagina rappresentano un passo in avanti rispetto ai CSS in linea, poichè tramite essi si definiscono una o più regole di stile all'interno di uno script css la cui valenza viene applicata all'intera pagina in cui si definiscono, come al solito facciamo un'esempio per capirci meglio:

<head>

    ...

 

    <styletype="text/css" media="screen">

 

    body {

      font-family:"trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif;

      background-color:White;

      color:#666666;

      font-size:.8em;

      margin-top:0auto auto 0;

    }

 

    p {

      padding: 1% 2% 1% 2;

    }

    </style>

   

</head>

 

<body>

...

</body>

Come vedete, per inserire le regole di stile in linea, ossia all'interno della pagina stessa, bisogna definirle nella sezione head, racchiuse in uno script di tipo CSS (l'attributo media indica l'output per cui verranno applicate, che può essere screen il video o print per la stampa). Le regole di stile definite in questo modo hanno valenza per tutta la pagina in cui sono inserite, quindi se definiamo una regola CSS per il tag paragrafo <p></p> questa verrà applicata a tutti i paragrafi presenti nella pagina. Anche questa tecnica porta gli svantaggi di quella precedente, nel caso di voler apportare una modifica, bisogna rivedere tutte le pagine del nostro sito, risulta utile invece quando si vuol definire esclusivamente una pagina o un componente diverso da tutti gli altri e focalizzare il foglio di stile all'interno della pagina stessa è un buon metodo per evitare una eccessiva frammentazione.

 

3) Fogli di stile esterni

I primi due metodi appartengono per così dire ai fogli di stile interni, per quelli esterni invece useremo un file con estensione css che andremo ad inserire all'interno del nostro progetto web (solitamente nell'Asset) e che poi referenzieremo dalle nostre pagine HTML, in questo modo:

</head>

    ...

    <link rel="stylesheet" type="text/css" href="fogliodistile.css" media="screen" /> 

</head>

quindi nel file "fogliodistile.css" andremo a definire tutte le nostre regole di stile, per il layout, per la formattazione, per i colori, dichiareremo classi, selettori e quant'altro. In ogni singola pagina html includeremo il nostro file css semplicemente "linkandolo"  nella sezione head del codice html. Questo è il metodo più comune ed usato per inserire i fogli di stile all'interno delle pagine html, ed offre molti vantaggi, innanzi tutto si ha una netta separazione tra il contenuto delle pagine e le regole di stile, inoltre le regole css definite nel file esterno hanno valenza su tutte le pagine che lo linkano, conseguentemente basterà apportare una modifica ad una regola presente nel foglio di stile esterno per vederla ripercuotere su tutto l'intero sito. Inoltre l'uso dei fogli di stile esterni incrementa anche la velocità di download delle pagine rispetto ai fogli di stile interni e conseguentemente la navigazione del sito, vi spiego il perchè, quando richiediamo una pagina web col browser (il client), facciamo un "download" della pagina e del codice in esso contenuto (quindi anche le regole CSS, interne o esterne che siano), quando passiamo a navigare la pagina successiva dello stesso sito, per i fogli di stile interni sarà necessario scaricare nuovamente tutto il codice, per quelli esterni invece no poichè saranno mantenuti nella cache del browser, allegerendo così il "peso" della pagina e migliorando la velocità di caricamento della pagina.

 

4) Fogli di stile "importati"

Infine c'è un quarto metodo per inserire i fogli di stile all'interno delle pagine di un sito, ma si tratta sempre di fogli di stile esterni, solo che con questo metodo saremo in grado d'inserire più fogli di stile esterni in un sol colpo, facendo uso e linkando un file CSS esterno che usi la direttiva @import per ogni altro foglio di stile esterno che si voglia inserire nelle pagine del sito. Quindi creiamo un file import.css ed al suo interno andremo a specificare quali file css vogliamo inserire, in questo modo:

@import "layout.css";

@import "format.css";

@import "default.css";

@import "menu.css";

 

 dopodichè non dobbiamo far altro che linkare questo file nelle nostre pagine web, così come abbiamo fatto per i fogli di stile esterni visti al punto 3, in questo modo:

<link rel="stylesheet" type="text/css" href="import.css" media="screen" />

automaticamente inseriremo così tutti i fogli di stile esterni specificati nel file import.css. Attenzione, per come è illustrato nell'esempio, i vari fogli di stile assieme a quello import devono risiedere nelll stessa directory, diversamente ricordatevi di specificare i path corretti.

Questo metodo oltre a portarsi dietro tutti i vantaggi visti per i fogli di stile esterni, permette di specificare fogli di stile differenti, il che non è poco, pensate a siti di medie-grosse dimensioni, e tutto ad un tratto vi accorgete di dover inserire un secondo file css esterno, linkare nuovamente il secondo file su 2000 pagine sarebbe una vera seccatura. Inoltre a mio avviso tenere separati i fogli di stile del layout da quello degli stili per la formattazione o per l'home page ha un'enorme vantaggio, ovvero quello di modularizzare le regole e sapere subito dove andare a mettere le mani, senza perdersi in fogli di stile lunghi chilometri e chilometri.

 

Conclusioni

Un uso corretto dei CSS porta dei grandi benefici al sito ed alla sua manutenzione e rispetta gli standard del W3C, sapere come inserire i fogli di stile all'interno delle pagine HTML in modo corretto è il primo passo verso il raggiungimento di questo obbiettivo. Ricordatevi però che le regole di stile hanno una valenza simile a quella delle variabili locali e globali nella programmazione, ovvero, se definite ed inserite regole di stile diverse ed applicate agli stessi elementi html all'interno della stessa pagina, prevarrà per prima la regola css in linea, poi quella del css incorporato ed infine la regola definita nel foglio di stile esterno.

 

Chiunque voglia aggiungere qualcosa in merito all'argomento, porre una domanda o dare un suggerimento, può farlo attraverso i commenti.

Categorie: CSS | Web Design

Tags: , ,

Commenti (24) -

Ciao, che servizi mi consigli per linkare un file css? Ho un sito gestito con Blogger, e dovrei integrare un css per un menù. E' importante.
Grazie in anticipo.

Rispondi

Prepara il tuo file css e caricalo su Google Drive, dopodiché condividilo (Share), come opzione di condivisione scegli sul web, a questo punto Google Drive ti darà un URL di condivisione , del tipo:
"googledrive.com/host/google-drive-code";

Adesso ti basterà all'interno di Blogger linkare la risorsa css con l'url pubblico fornito da Google Drive, in questo modo:
<link href="googledrive.com/host/google-drive-code"; rel="stylesheet" />

Rispondi

Ok grazie proverò, per il momento ho inserito lo script css dopo la descrizione html del menù Smile carica un po' più lentamente il sito ma ora proverò col tuo metodo e ti farò sapere ;)

Rispondi

Quindi lo hai inserito all'interno del codice stesso e non richiamando un file css esterno, giusto? Fammi sapere, ciao.

Rispondi

Sì, non sono riuscito a linkare il css con nessun servizio (mega, mediafire, dropbox, 4shared, google drive) a cui sono iscritto...
Pazienza.
Piuttosto, volevo semplificare il mio tema Blogger, e ho notato che è xml: che significa? Inoltre, ogni elemento della grafica è espresso così:

<Group description="Page Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Open Sans"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#373737"/>
   </Group>

Cioè da quel che ho capito (ho ancora poca dimestichezza con l'html) c'è registrata sia la versione default, che dovrebbe permettere il funzionamento dell'editor di temi di Blogger, sia la nuova personalizzazione, che è quello che conta davvero. Quindi, quanto può convenire - se si può - eliminare la parte default?

Rispondi

Non lo so, parte default o personalizzata, non uso e non conosco blogger se non superficialmente, strano cmq che non riesci a linkare il file css, mah!
XML (acronimo di eXtensible Markup Language) è un linguaggio di markup per documenti, lo usano diverse piattaforme poiché consente la portabilità, infatti a differenza dell'html deve rispettare regole sintattiche precise, a te questo credo però che non ti debba interessare per gestire blogger.

Hai provato come ti ho detto io? Ciao.

Rispondi

Ciao, volevo sapere se il processo di importazione del CSS possa essere fatto con Wordpress e nel caso se è corretto inserire nel codice:
<link href "http://wordpress.org/themes/twentywelve"; rel="stylesheet/">

Non è che in href debba mettere il link dove è presente il file in locale?

Grazie in anticipo

Rispondi

Per aggiungere un file css a WordPress devi aggiungere questo pezzo di codice html nell'head:
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css-directory/nome-file.css" type="text/css" media="all" />

dove template url è l'indirizzo del template da te scelto, se devi invece caricare un file css locale ovviamente inserirai in href il path (percorso) locale anziché l'url.

Un altro modo per aggiungere uno o più css in wordpress è quello di sfruttare la direttiva @import all'interno di un altro file css stesso, apri ad es. il file css principale ed aggiungi la seguente riga in fondo (o in cima) al foglio:
@import url("../mio-path/nome-file.css");

Salvi ed il gioco è fatto, ciao.

Rispondi

ciao senti sto creando il mio primo sito web ho un problema non riesco a creare un menù con CSS poichè non so dove inserire il tag se nel body o nello style o altrove.
con html riesco a crearlo ma con CSS no
puoi aiutarmi grazie in anticipo

Rispondi

Ciao Vincenzo,
dai un'occhiata qui:
www.html.it/.../
ti spiega bene come creare un menù con i css.
Per quel che riguarda il "posizionamento" delle regole di stile, io consiglio quasi sempre d'inserirle in un file (.css) a parte, da richiamare poi nella sezione head del sito.

Rispondi

vincenzo
vincenzo says:

si questo sito lo conosco molto bene il mio problema e che non so come creare il file.css per poi richiamarlo
GRAZIE.

Rispondi

Creare un file css è semplicissimo, basta creare un nuovo file di testo (.txt), scrivergli dentro le regole di stile che ti servono e quando hai finito salvare il suddetto file o cambiarne l'estensione da .txt a .css
Quando lo devi richiamare nella pagina html, nella sezione head inserisci il seguente tag:
<link rel="stylesheet" type="text/css" href="fogliodistile.css" media="screen" />

ovviamente nell'attributo href metterai il percorso ed il nome del file .css da te creato.

Rispondi

ciao senti io ho un problema ho creato il menù con i fogli di stile esterni,solo che ora voglio provare a centrarlo solo che quando metto il witdh a 960px centra il menù ma si comprime tutto.Ho provato a ridurre i px ma niente da fare secondo te devo ridurre i px di tutto il menù o salto qualche passaggio?
premessa ho utilizzato un drawn-menu (non so se è scritto correttamente)

Rispondi

Ciao Vincenzo,
difficile rispondere in maniera precisa a questa domanda, diversi fattori potrebbero influenzare la formattazione degli elementi del tuo menù.
Bisognerebbe guardare il layout html (eventuali elementi contenitori) e soprattutto la definizione delle tue regole di stile.
Puoi provare comunque a definire la larghezza width in percentuale anzichè in pixel, e poi cerca in rete qualcosa del tipo "centrare div css" ,  troverai tantissimi esempi che una volta studiati un po', potrai adattare al tuo caso.

Spero di esserti stato utile, saluti Giorgio.

Rispondi

vincenzo
vincenzo says:

ciao Giorgio, avevi perfettamente ragione come ho espresso il width in percentuale il menù si è spostato verso il centro mentre io l'ho esprimevo in px grazie per la disponibilità ora con lo stesso metodo provo a centrare pure un contenitore con gli angoli smussati a presto....
ps: se ho problemi ti riscrivo....

Rispondi

Ottimo,
probabilmente per adesso va bene, però centrare un elemento con i css non è solo un fattore di esprimere i margini, posizioni o dimensioni in percentuale o pixel, c'è altro.
T'invito nuovamente a cercare e studiare una soluzione in rete già comprovata e funzionante, una volta fatta tua avrai appreso un metodo per i tuoi futuri design.

Per il resto, torna pure a commentare quando vuoi, sei sempre il benvenuto.

Rispondi

vincenzo
vincenzo says:

ciao, sono sempre io che ti annoio sto provando a inserire un'immagine (centrata a sinistra) usando questo codice:
#immagine.png {position: relative;}
position: absolute;
top: 50px;
left: 20px
}
ma non so perchè ma non si sposta forse perchè al centro ho già creato un contenitore? e quindi non mi permette di affiancare l'immagine?

Rispondi

Ma questo comando di stile non significa nulla. Il selettore '#' cancelletto viene usato per applicare la regola ad un tag html con un identificativo univoco, ad es. se ho un div con id mypersonaldiv, tipo così:
<div id="mypersonalid">...</div>
allora la regola di stile con quel selettore la scriverai così:
#mypersolaid { ... }
in nessun modo và applicato al nome (con estensione) del file, al massimo scriverai:
<img id="myimg" src="... />
e poi:
#myimg { ... }
per lo stile.

Leggere una guida di base sui selettori, classi e pseudoclassi css tornerebbe utile, saluti Giorgio.

Rispondi

vincenzo
vincenzo says:

ed è proprio questo il mio problema non so più come richiamare il (div)questo è il codice html richiamando id="tutto"
<div>
<a href="http://tuttosport.it"><img id="tutto" src="tuttosport.png"width="150"height="100"hspace="20"align="left"/>
</div>
mentre css:
#tutto {position: relative;}
position: absolute;
top: 50px;
left: 20px;
}
ma l'immagine non si sposta ho provato a mettere (%) sia per il top che x il left ma mi sta facendo dannare sta foto ho letto che posso usare anche il tag <span> ma non voglio riempire troppo la pagina html visto che i css esterni sono molto più utili tenendo la pagina molto in ordine...

Rispondi

Prova a rimuovere la proprietà align="left" dal tag img.

Prendilo come un suggerimento: da quel che mi scrivi suppongo che tu sia proprio all'inizio con i css, oltre a sperimentare, studiare una guida sui fogli e le regole di stile e via via fare esempi e test su quanto si è letto è buon metodo per impararli.

Rispondi

vincenzo
vincenzo says:

sisi, infatti mi sto esercitando con i contenitori e le immagini  solo che in rete ho trovato solo materiale in pdf e il tuo blog(ottimo) mentre i pdf non è che spiegano un granchè anzi se fai qualche buon manuale, il tuo consiglio è sempre ben accetto.
ps: ho tolto l'aling="20" ma comunque non va la l'immagine di tutto sport non si muove dovrei metterla al centro sinistra poichè al centro ho creato un contenitore con gli angoli smussati. E' una pagina inereste allo sport.
grazie per la pazienza Smile  

Rispondi

Come ti ho scritto in un commento precedente diversi fattori possono influenzare il posizionamento della tua immagine, così è difficile poter dare una giusta indicazione.
Se la tua immagine resta ferma, probabilmente c'è qualche altro elemento che ne blocca la posizione, come ade es. potrebbe essere il div contenitore, prova a quest'ultimo elemento (al div contenitore) ad applicare delle regole di stile per il posizionamento e vedi cosa succede.
Ah questo che hai scritto su:
#tutto {position: relative;}
position: absolute;
top: 50px;
left: 20px;
}
non significa niente, probabilmente è solo un errore di battitura dovuto alla fretta, ma letta così questa regola di stile non serve a nulla, ed è pure sbagliata, la seconda parte manca un qualsivoglia selettore o classe.

Un manuale sui CSS? Me ne guardo bene, in rete ne trovi a bizeffe, anche siti specializzati che parlano solo di questo, se sai cercare troverai dell'ottimo materiale.

Ciao e alla prossima, Giorgio.
P.S. grazie per i complimenti.

Rispondi

vincenzo
vincenzo says:

però nei nostri commenti ho dimenticarti di dirti che sei praticamente un GENIO in tutti i sensi avevi perfettamente ragione ho controllato tutti i div della pagina e poi il codice css era da togliere {position relative} poichè il comando che serviva a me era potion absolute ora funziona l'immagine si sposta correttamente.......ancora grazie......GENIO

Rispondi

No dai non scherziamo ma quale genio, sono felice che ti sia stato utile, cerco di fare il possibile, tutto qua.

Torna pure a commentare quando vuoi, Giorgio.

Rispondi

Aggiungi Commento

biuquote
  • Commento
  • Anteprima
Loading