Pagina aggiornata... Venerdì, 06 Marzo 2026 * Tempo di caricamento 0.003 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 2343 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...

DanyGraphic ~ 06/04/2026 20:14:40
Ciao Penny , grazie per il tuo consiglio, sei sempre un punto di riferimento . Un abbraccione a te . Ti auguro una buona serata
ૡScritto in Home
DanyGraphic ~ 06/04/2026 13:51:58
Ciao Penny e buona Pasquetta , oggi casualmente ho dato un occhiata alle pagine con testo scorrevole che volevo sistemare e magicamente funziona tutto come prima , compreso le stelline che scendono sulle immagini .....è un caso che tu sappia ....? io non trovo nulla a riguardo, ma credo rimetterò le pagine online . Buonissima giornata
ૡScritto in Home
ૡPenelope ♥ ~ 04/04/2026 17:38:15
Grazie infinite Bibi e Krault un abbraccio forte forte Buona Pasqua a voi e a tutti gli amici del telaio
ૡScritto in Home
Krautl ~ 04/04/2026 09:53:12
Frohe Ostern
ૡScritto in Commenti telaio...
BiBi ~ 04/04/2026 07:18:36
Buona Pasqua a Penelope 🌺 e a tutta l'utenza
ૡScritto in Home
DanyGraphic ~ 02/04/2026 18:17:56
Sono passata per un saluto . Sempre piacevole navigare nel tuo sito , un abbraccione e cari Auguri di buona Pasqua
ૡScritto in Home
Grazia ~ 02/04/2026 08:16:05
Buongiorno carissima Penelope, sempre bellissimo e interessante qui! Ottimo il nuovo aggiornamento sulla funzione marquee :) Ti lascio un forte abbraccio e tanti carissimi auguri per una serena Pasqua. Ciao!
ૡScritto in Home
ૡPenelope ♥ ~ 30/03/2026 16:18:12
Ciao carissima Ahamiah non sono riuscita a lasciare un saluto nel tuo forum quindi ti ringrazio tantissimo e ti mando un forte abbraccio qui
ૡScritto in Datari con saluto more image
=ahamiah= ~ 29/03/2026 09:48:10
Buona domenica delle Palme, ho riscoperto il vostro forum e vi faccio i complimenti. Ho prelevato il codice di uno dei vostri saluti con data. Grazie a buon lavoro.
ૡScritto in Datari con saluto more image
Cris ~ 28/03/2026 18:34:53
Ciao, sono passata per un salutino. Buon fine settimana!
ૡScritto in Commenti telaio...