Pagina aggiornata... Venerdì, 06 Marzo 2026 * Tempo di caricamento 0.010 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Html » Basi css pagina web

..:: Basi css per una pagina web ::..

I css sono indicazioni che possiamo inserire in una pagina web affinché ciò che
pubblichiamo abbia un determinato aspetto, ci permettono di personalizzare ogni singolo elemento,
il colore o lo sfondo grafico della pagina, tipo, colore e misura del font per il testo dei contenuti
e per il testo di titoli e paragrafi, i contenitori (div, table, celle), i link, le immagini, ecc., ecc.,

Possiamo scrivere i parametri per le indicazioni in linea cioè man mano in ogni elemento
e/o testo che inseriamo o scrivere le classi css da richiamare dove e quando servono
L'insieme di classi (style css) necessarie si può scrivere nella pagina o in un file esterno
così da poterlo richiamare in tutte le pagine del sito

Questo è un esempio per un paragrafo con lo style css in linea

<p style="text-align:center; font-family:Verdana; font-size:12px; color:#af757d;">Testo</p>
Soluzione veloce ma poco pratica perché occorrerà scriverlo così ogni volta e causerà confusione
nel codice della pagina che man mano sarà piena di tag simili, quindi opzione sconsigliata

Vediamo come scrivere le classi da richiamare nei vari elementi

Lo style css di una pagina web si scrive tra i tag <head> e </head>
e si racchiude tra i tag <style type="text/css"></style>

Si possono scrivere classi generiche "class" da richiamare in qualunque elemento, ovviamente
considerando l'elemento e i parametri inseriti o classi con identificatore unico "id" dedicate
ad un singolo elemento e che si possono richiamare una sola volta nella pagina

Per scrivere una classe generica si utilizza il punto e un nome .mia_classe
e il tag di richiamo in un elemento nella pagina è: class="mia_classe"

Per un identificatore unico id invece si utilizza il cancelletto e un nome #mia_classe
e il tag di richiamo nell'elemento per cui è stata scritta è: id="mia_classe"

In entrambi i casi si possono scrivere precedute dall'elemento che si vuole personalizzare
table.mia_classe ma essendo una classe generica si può richiamare anche in un paragrafo,
div#mia_classe sarà comunque possibile attribuire questa classe ad un unico elemento

Per l'aspetto generale della pagina, colore/sfondo, testo, posizione e margini
si scrive una classe apposita per il body e non occorrerà richiamarla, stessa cosa
per i link a meno che non si facciano delle classi specifiche

Iniziamo quindi con la classe per la pagina (body)


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titolo pagina</title>

<style type="text/css">
body { background-color :#d6e8f4;
text-align:center;
font-family: "Georgia";
font-size:14px;
color:#1b72ab;
}
</style>

</head>

<body>

</body>

</html>

background-color :#d6e8f4; è il parametro per impostare il colore di sfondo della pagina,
per un'immagine grafica si utilizza background-image: url('url pagina immagine');

* Proseguiamo con le classi per i titoli e i paragrafi

I titoli scritti utilizzando questi tag hanno determinate regole, per maggiori info
leggete anche la guida dettagliata qui -> w3schools tag titoli

In sostanza <h1> si può utilizzare una sola volta nella pagina, per intestazione/titolo
e bisogna poi proseguire in ordine <h2>, <h3>, ecc., ecc.

[...]

/* Classi per titoli e titoletti */
h1,h2,h3{margin: 0; color: #105d96;}
h1{margin-bottom: 5px;font-size:110%}
h2{margin-bottom: 8px;font-size: 100%;text-align:center;}
h3{margin-bottom: 5px;font-size: 100%;font-style: oblique;text-align:center;}

/* Classe per testo paragrafo */
.testo_piccolo {
font-family : "Georgia";
color : #8aa616;
font-size : 11px;
margin: 0;
}

Queste classi vanno richiamate dove occorre nella pagina
- I titoli: <h1>Titolo </h1> - <h2>Titolo </h2> - <h3>Titolo </h3>
- Un paragrafo: <p class="testo_piccolo">Testo </p>

I font che si possono utilizzare in una pagina web che non creano problemi con i vari sistemi
operativi sono relativamente pochi, spesso risultano "freddi" ma sono leggibili perché non hanno
esagerazioni grafiche, in alcuni casi però occorre intervenire sullo spazio tra le linee di testo altrimenti
risulta troppo fitto, ad esempio, il font per il testo del telaio è il Georgia, molto elegante e armonioso
ma ho dovuto inserire il parametro line-height impostato a 1.5 (line-height: 1.5;) affinché le righe
di testo non risultassero troppo appiccicate e faticose da leggere, con altri font invece è meglio
impostare una misura più grande perché i caratteri risultano molto piccoli

- Questi sono i font consigliati in rete:

Arial - Brush Script MT - Comic Sans - Courier New - Garamond - Georgia - Helvetica - Impact
Lucida Console - Palatino - Tahoma - Times New Roman - Trebuchet MS - Verdana

C'è anche la possibilità di utilizzare dei font personalizzati, con il codice fornito da Google font
o scaricati in rete, free o a pagamento e importati nel proprio spazio hosting da richiamare nei css
se vi può interessare leggete il tutorial Font personalizzato

* Aggiungiamo le classi per i link

Come tutto il testo che scriveremo nella pagina anche i link si visualizzeranno con il font impostato
ma di default sono di colore blu e sottolineati, caratteristica pensata probabilmente perché devono
attirare l'attenzione e far capire che è un testo che permette di accedere ad altro contenuto

Per renderli coordinati ai colori delle nostre pagine si può intervenire con una classe che funzionerà
senza richiamo e come per il body scriviamo le personalizzazioni direttamente nel tag a, per il colore,
eliminare la sottolineatura, il font e/o la misura, uno sfondo, il tipo di cursore che si deve visualizzare
al passaggio del mouse, insomma si può aggiungere qualsiasi proprietà css

[...]

/* Classe per i link */
a {
text-decoration: none;
cursor:nw-resize;
font-family : "Georgia";
color : #8aa616;
font-size : 12px;
}

Oppure possiamo inserire queste 4 proprietà ognuna con la sua funzione specifica

a:link - Contiene i parametri con cui si vuole far visualizzare i link nella pagina,
font, colore e misura possono essere differenti da quello impostato nel body per la pagina

a:visited - Se si imposta un colore differente da quello inserito nella classe link mostra all'utente i link che ha già cliccato

a:hover - In base ai parametri inseriti si modifica al passaggio del mouse

a:active - Visualizza un collegamento nel momento in cui viene cliccato

- Esempio di classi per i link


[...]

/* Classi per i link */
a:link {
text-decoration: none;
cursor:nw-resize;
font-family: "Georgia";
font-size: 14px;
color:#3a2427;
}
a:visited {
text-decoration:none;
cursor:nw-resize;
font-family: "Georgia";
font-size: 14px;
color:#a27279;
}
a:hover {
text-decoration: line-through;
color: #909753;
}
a:active {
font-family: "Georgia";
font-size: 14px;
color: #c3070a;
}

Ecco come si visualizzeranno i link
a:link Nome Link       a:visited Nome Link
a:hover Nome Link       a:active Nome Link

Queste classi saranno attive in ogni link che si scrive nella pagina,
per link particolari o comunque differenti se ne possono aggiungere altre impostando
anche un font personalizzato, queste classi extra andranno richiamate nel codice

- Esempio classi extra per i link


[...]

/* Classi extra per i link */
a.nome_classe:link{
font-family: "Verdana";
color : #909753;
font-size : 12px;
text-decoration: none
}
a.nome_classe:visited {
text-decoration:none;
cursor:nw-resize;
font-family: "Verdana";
font-size: 12px;
color:#464d0b;
}
a.nome_classe:hover{
color: #5f6339;
text-decoration: underline
}
a.nome_classe:active {
font-family: "Verdana";
font-size: 12px;
color: #dca328;
}

Questa classe deve essere richiamata nei link così:
<a class="nome_classe" href="url pagina">Nome link</a>

Ecco come si visualizzeranno i link
a:link Nome Link       a:visited Nome Link
a:hover Nome Link       a:active Nome Link

In questa pagina ho inserito in modo completo gli esempi delle classi css
che ho descritto, Pagina css completo ricapitolando, abbiamo visto come si scrivono
le classi per il body (pagina), i titoli e i paragrafi, ed infine per i link, e questi sono solo degli esempi
che si possono arricchire, in base alle esigenze, con altri parametri ma sono le basi che ci servono
per iniziare a scrivere i css, per lo meno in modo ordinato, così sarà sicuramente
più semplice apportare modifiche e aggiornamenti futuri

Attenzione ai nomi che inserite nelle classi, se sono doppi verrà presa
in considerazione la prima classe scritta quindi vi potreste ritrovare una table
che si visualizza con i parametri inseriti per un paragrafo

Ora possiamo proseguire con i parametri per i contenitori dei vari spazi della pagina,
per gli elementi grafici, menu di navigazione e via dicendo, si possono fare delle aggiunte e/o modifiche
in qualsiasi momento per ottenere esattamente ciò che vogliamo in maniera semplice e veloce

Nel menu html in colonna trovate i tutorial specifici per approfondire su questi elementi base
e per aggiungere eventualmente gli altri elementi necessari in una pagina/sito web

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
84%
Voti totali: 5
Rating... 4




Commentario...

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









~ Pagina visitata da 2567 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