Come aggiungere CSS ad una pagina HTML

Per aggiungere CSS (Cascading Style Sheets), ad una pagina html ci sono principalmente Due modi:

1- inserire il codice CSS direttamente nella pagina HTML;

o

2- Creare un foglio esterno contenente il codice CSS che verrà poi collegato via link alla pagina HTML.

Ma soffermiamoci sull’importanza del CSS. “A cosa serve creare del codice CSS definito anche foglio di stile, per una pagina HTML?”

Il CSS attualmente è la base grafica di ogni sito web, senza CSS non abbiamo un sito ma solo una pagina HTML non formattata ne abbellita, cioè un sito senza “stile” ne una buona organizzazione, per farvi capire vi posto due esempi di Pagina html una con css e l’altra senza.

Esempi:

CSS ON
Sito “Saluxjiras.it” con annesso file CSS (clicca per ingrandire)
CSS off
Sito “Saluxjiras.it” senza file CSS (clicca per ingrandire)

Probabilmente vi saranno alquanto evidenti le differenze con o senza CSS che ci possono essere su di uno stesso sito. La prima immagine, come si vede è “più o meno” organizzata  a gusto dell’Autore del Template, la seconda invece è alquanto “spoglia” di ogni organizzazione, i file ed i collegamenti si inseriscono in colonna l’uno sotto l’altro.

N.b. Casi come La seconda immagine di esempio possono capitare anche in situazioni in cui il sito ha il file CSS ma è momentaneamente troppo lento o nel caso ci siano problemi che non concedono all’utente di caricare il CSS.  RIPETO IL CSS E’ BASILARE!

Parlando ancora di CSS bisogna dire che non viene elaborato in maniera identica da tutti i Browser. Ogni Browser ha i sui codici CSS e li elabora, in molti casi, differentemente dagli altri. Mettiamo a confronto 2 browser, Chrome ed IE:

CSS e Browser (Chrome, IE)
Sopra Chrome sotto IE

Da come si può vedere uno stesso foglio di Stile è stato elaborato in due modi diversi da i due Browser, elemento più evidente è il “Border Radius” che per chrome ha dato un buon esito e per IE è completamente assente (questo però è un problema di IE che non accetta il radius). Deve essere Abilità di un web-designer far si che ogni browser dia il medesimo risultato.

 INSERIMENTO DEL CSS

Passiamo ora all’inserimento del CSS:

Ipotesi 1: inserire Il codice CSS direttamente nel file/pagina HTML.

Per fare ciò ci occorre un editor html o anche un semplice Blocco note per creare il file ed il nostro browser.

Apriamo il blocco note  ed iniziamo a creare la nostra pagina html. Una volta creata dovremo salvare il file con estensione .HTML ;

per inserire il css dovremo aggiungere ad inizio della nostra pagina HTML la seguente dicitura che conterrà il codice CSS:

<style type=”text/css”>

.inserire qui {il codice css;}

</style>

dopo questa dicitura, proseguirà la nostra pagina html con relativi class ed id (identificativi che collegano il determinato codice css alla porzione di codice html).

Esempio di semplice foglio html con annesso CSS interno:

Per ogni elemento bisogna stabilire un class o un id per rendere noto al Browser che tale elemento deve essere letto con quella formattazione di stile. Non solo è possibile inserire codice “style=” “ ” direttamente sull’elemento senza inserire id o class, quando sono delle piccole porzioni di codice di formattazione da dover impostare.

Sono più che convinto che la procedura appena esplicata non è delle migliori per la realizzazione di un sito, inserire codice css direttamente nella pagina html non è una procedura ottimale, la miglior scelta è creare un foglio di stile a parte e collegarlo all’html, così da rendere più agevoli e fluide eventuali modifiche e letture del codice.

Per questo passiamo alla seconda ipotesi.

Ipotesi 2: Creare un foglio di stile esterno che verrà poi collegato via link all’HTML.

In questo caso dovremo creare un foglio di stile contenente il nostro codice con estensione .css ed al posto della dicitura/codice descritto nell’Ipotesi 1 dovremo inserire nella “head” del nostro foglio HTML il seguente codice di rifermento del foglio di stile:

<head>

<link rel=”stylesheet” href=”http://stilicss/dove/abbiamo/inserito/ilcss” type=”text/css”>

</head>

 

Al posto del link dovremo inserire il percorso al nostro foglio di stile che può essere inserito via link, quindi path assoluta o path relativa avendo come riferimento la cartella in cui è presente la pagina HTML.

Esempi:

path assoluta: href=”http://miosito.com/stili/file.css”>

path relativa:  href=”stili/file.css”

Fatto ciò, se tutto è stato fatto correttamente, abbiamo collegato il file del foglio di stile alla nostra pagina/sito HTML.

Ecco un esempio di file con collegamento da poter scaricare e su cui fare i propri test (Clicca per il download)

(ricordate di inserire class o id per ogni elemento se volete che abbia formattazione css)

Per qualsiasi problema postate un commento e risponderò appena possibile.

Articolo a cura di Saluxjiras.it

 

About Claudio Daniele

Claudio Daniele

Claudio Daniele, è Webmaster di “Saluxjiras.it”, Blogger Freelance, articolista, amante del web e di tutto ciò che lo circonda. Nella vita, è uno studente universitario ed in rete Scrive soprattutto di Tecnologia, Social Media Marketing, Giochi e curiosità dal web.