Pagina aggiornata... Venerdì, 06 Marzo 2026 * Tempo di caricamento 0.003 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Html » CSS o foglio di style - File esterno

..:: CSS o foglio di stile in file esterno ::..

CSS è la sigla di Cascading Style Sheets ovvero foglio di stile a cascata,
"stile" perché è il linguaggio che ci permette di realizzare il design di una pagina web,
"a cascata" perché le classi con i parametri si scrivono una di seguito all'altra

I CSS sostituiscono i parametri scritti in linea in tutti i contenuti di una pagina web,
dall'aspetto della pagina, la struttura (layout), il testo, contenitori, immagini, ecc. ecc...

Esempio pratico, per definire il tipo (font), il colore e la misura per la scrittura di
un testo/paragrafo occorre inserire i parametri necessari al tag che lo racchiude, <p>[...]</p> se
si procede in linea si avranno righe di codice simili a questa, da riscrivere in ogni testo/paragrafo

<p style="text-align:center; font-family:Verdana; font-size:12px; color:#af757d;">Testo</p>

Con una classe CSS si semplifica il lavoro e il codice della pagina che sarà più leggero e pulito

[...]
.testo_verde {
text-align:center;
font-family: 'Verdana';
font-size: 12px;
color : #af757d;
margin: 0px;
}

Per richiamare la classe nella pagina basterà scrivere:
<p class="testo_verde">Testo</p>
e si potrà utilizzare tutte le volte che sarà necessario

Nel tutorial Basi CSS pagina web ho spiegato quali siano le classi indispensabili per realizzare
e personalizzare una pagina web, se avete dato un'occhiata vi sarete accorti che le classi da scrivere
sono molte, si inizia dal body ovvero l'aspetto principale della pagina, poi i titoli, i paragrafi,
i link, e per un sito un po' elaborato serviranno classi per i contenitori della struttura/layout
per i contenitori dei contenuti, i menu per la navigazione delle pagine e via dicendo...

Man mano che si procede con la realizzazione di una pagina o meglio ancora di un sito web,
i CSS si arricchiranno di classi ovvero tante righe di codice che occuperanno parecchio spazio,
in questo esempio ho inserito solo le voci principali

<style type="text/css"> o <style>
body { background-color :#d6e8f4;
text-align:center;
font-family: "Georgia";
font-size:14px;
color:#1b72ab;
}
/* Classi per titoli e titoletti */
h1,h2,h3{margin: 0; color: #105d96;}
... parametri ...

/* Classe per testo paragrafo */
.testo_verde {
... parametri ...
}
/* Classi per i link */
a:link {
... parametri ...
}
a:visited {
... parametri ...
}
a:hover {
... parametri ...
}
a:active {
... parametri ...
}

/* Classi layout */
div#header {
... parametri ...
}
div#corpo {
... parametri ...
}
div#footer {
... parametri ...
}

/* Classi per Table */
table.base{
... parametri ...
}
table.bordo{
... parametri ...
}
table.rossa{
... parametri ...
}

/* Classe menu barra */
.menu_barra {
... parametri ...
}
/* Classe menu colonna */
.menu_colonna {
... parametri ...
}
/* Classe ..... */

</style>

Per alleggerire le pagine del sito e semplificare il lavoro si possono scrivere i CSS in un'altra pagina,
una pagina/file dedicata che deve avere come estensione .css da richiamare con una riga di codice

In una nuova pagina, che non abbia nessun altro codice si scrivono o incollano le classi
senza il tag dello stile che lo racchiude, <style type="text/css"> o <style>[...]</style>
si salva la pagina/file inserendo un nome tipo style.css - style_home.css - style_pagine.css si carica
nel proprio spazio web e si richiama nella pagina/e, sopra il tag </head> con questo codice

<link rel="stylesheet" type="text/css" href="style.css">

Con i CSS scritti in un unico file sarà più semplice apportare modifiche
in tutte le pagine del sito senza doverle rieditare singolarmente

Si possono scrivere più file .css dedicati ad esempio a menu particolari, alla struttura o
per gli script e si richiamano tutti nella pagina/e scrivendo sempre prima del tag </head>
sarà ancora più semplice fare delle modifiche e/o aggiornamenti

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="menu.css">

* Per scrivere in modo corretto i CSS affinché siano "compresi" dai vari browser
vi consiglio di consultare w3schools.com/css/ con spiegazioni dettagliate ed esempi live

Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


Dai un giudizio a questo tutorial... Grazie ^_^

💻 ✨ Apprezzato
40%
Voti totali: 5
Rating... 2




Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^









~ Pagina visitata da 2555 utenti





Segui il telaio su Facebook

* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥


Basi e utilità pagine web



html tag scrittura pagine web





Script per pagina



Script per gadget




Preleva anche tu una tag Help donna

Aiutami a diffondere il più possibile informazioni
utili alle donne vittime di abusi... Grazie!



Link del telaio...

ೡ Il telaio di Penelope
☆ Template webset e blog
☆ Un sito su AlterVista
☆ Gif & co...





I vostri messaggi...

ૡPenelope ♥ ~ 22/09/2026 20:36:49
Grazie a te carissima Marina
ૡScritto in Calendario magico box small
marina ~ 20/09/2026 20:04:19
Grazie infinite per il bellissimo calendario.
ૡScritto in Calendario magico box small
ૡPenelope ♥ ~ 14/09/2026 22:32:30
Cara Filo d'arianna un po' di anni fa ho realizzato qualche grafica per ForumFree ed era un delirio non so se è ancora così ma la grafica si componeva con decine di piccole immagini, davvero tanto lavoro nemmeno gratificante purtroppo, per quanto riguarda i tutorial, sono una maniaca di html, php e js ma sulla gestione di un forum non saprei da dove partire Un abbraccio forte
ૡScritto in Blogger Kit Autunno
ૡPenelope ♥ ~ 14/09/2026 18:34:20
Carissima Filo d'arianna grazie alla tua segnalazione ho risolto un problema nel commentario purtroppo per evitare spam e messaggi sgradevoli avevo impostato un eccesso nei controlli, ripristinato, ora si può commentare e mettere url del proprio spazio senza problemi grazie infinite cara un abbraccio forte forte
ૡScritto in Home
filod'arianna ~ 14/09/2026 07:41:37
Ciao Penelope! Ho preso il Settimanello micioso:-DL'ho inserito all'interno della sezione "Appunti" sul mio forum, però ho visto che non si può più linkare qui nei messaggi, non riesco a farti vedere dove l'ho inserito. Ad ogni modo il forum è Librandosi tra le pagine, su forumfree. Un abbraccio a presto!
ૡScritto in Home
filod'arianna ~ 12/09/2026 06:52:57
Hai mai pensato di buttarti nel creare grafica e tutorial per ForumFree? 😂 Sto scherzando, ma solo a metà! Sarebbe fantastico. Ne approfitterei immediatamente
ૡScritto in Blogger Kit Autunno
ૡPenelope ♥ ~ 11/09/2026 16:56:26
Carissima Filod'arianna ti ringrazio tantissimo è il più bel complimento che si possa riceve! Un abbraccio forte e viva l'autunno!!!
ૡScritto in Blogger Kit Autunno
filod'arianna ~ 10/09/2026 07:03:48
Adoro il colore di Ortensie vorrei un blog su Blogger solo per i tuoi kit e i tuoi accessori:-D Grazie mille per tutto ciò che metti a disposizione carissima 😘N.B. Anch'io non vedevo l'ora che arrivasse un po' di fresco -.-'
ૡScritto in Blogger Kit Autunno
Cris ~ 02/07/2026 19:45:24
Ciao, sono passata per un salutino e per rivedere il tuo sito. Buona serata e buon fine settimana.
ૡScritto in *Amici del telaio...*
DanyGraphic ~ 30/05/2026 15:30:54
Ciao Penny , sempre belle e interessanti le tue pagine .Un abbraccio e buon fine settimana
ૡScritto in Home