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 2296 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...

Cris ~ 16/03/2026 15:25:23
Ciao. Ho preso un tuo Almanacco, è perfetto per il mio blog. Grazie!
ૡScritto in Almanacco soft
Sabry ~ 10/03/2026 11:39:07
Io ti adoro ... vorrei tanto essere brava come te, ti seguo da anni e rimango sempre affascinata dalla tua astuzia e bravura e creativitá ♥ Prendo spunti ♥ Grazie di ♥
ૡScritto in Sfondo pagina
Gabriella ~ 09/03/2026 18:37:40
Ciao Penny, come sempre i tuoi lavori sono molto eleganti ,ne ho prelevato due per adesso ;) grazie
ૡScritto in Decori pagine Primavera
soleyada ~ 07/03/2026 22:02:27
Mi hai fatto tornare indietro nel tempo cara Penny, non smettere mai di splendere, è tutto stupendo qui, ti auguro il meglio, bacioni :-*
ૡScritto in Countdown Primavera
Cris ~ 24/02/2026 08:17:18
Ciao, e bentornata. Mi è sempre piaciuto il tuo bel sito. Ho creato da poco un blog, il tuo sito è il primo tra i miei preferiti.
ૡScritto in Home
MOra Ribelle ~ 16/02/2026 12:05:35
Buongiorno, contenta del tuo ritorno. Mi domando come metto anche io questo box saluti? grazie
ૡScritto in Gif & co...
Sari ~ 14/01/2026 17:31:32
Buon Anno Penelope. Ho prelevato un top pagina sostituendo quello natalizio. Tutto bello e utile qui, grazie.
ૡScritto in Marquee con Javascript
Frann ~ 25/12/2025 15:09:37
Cara amica Penelope, ti auguro un Natale, con pace, amore e tanta gioia. Bacione ~ Frann
ૡScritto in Home
filod'arianna ~ 24/12/2025 08:50:20
Auguri di buon Natale Penelope, e a tutti i visitatori del Telaio 🎄✨😃
ૡScritto in Home
Sari ~ 18/12/2025 22:01:59
Ciao Penelope, ti seguo da anni e tanto ho imparato dalle tue lezioni: grazie. Ti auguro un Natale sereno e, nonostante i tempi che stiamo vivendo, in allegria. Buon Natale
ૡScritto in Home