Antonio Mercurio Guida al linguaggio CSS di base

Antonio Mercurio

Guida al linguaggio CSS di base

Introduzione

Il linguaggio CSS non è un linguaggio di programmazione come non lo è l'HTML.

Mentre quest'ultimo nella sua versione base ci consente semplicemente di mostrare

contenuto statico sulle nostre pagine web, il linguaggio CSS stabilisce lo stile per

mostrare il testo e l'impostazione visuale di tutta la formattazione. In pratica quando

abbiamo bisogno di mostrare qualsiasi cosa sulle pagine web possiamo farlo in

modo statico attraverso il linguaggio HTML, mentre se dobbiamo impostare lo stile

della formattazione allora usiamo il CSS. Abbiamo bisogno di stabilire il colore di

sfondo dell'intera pagina o solo di un elemento?. Dobbiamo impostare il colore del

carattere, lo stile, la dimensione per tutto il testo o parti di esso?. Dobbiamo definire

la formattazione delle tabelle, degli elenchi e dei link?. Tutto questo lo possiamo

definire una sola volta creando file in formato CSS ed importandolo nel nostro

documento HTML.

Sommario
Introduzione........................................................................................................................................2
Di cosa hai bisogno per questo libro?.................................................................................................4
CAPITOLO 1......................................................................................................................................5
   LE BASI.........................................................................................................................................5
   Gestire il testo................................................................................................................................8
CAPITOLO 2....................................................................................................................................10
   Gestire i paragrafi........................................................................................................................10
CAPITOLO 3....................................................................................................................................14
   Tabelle ed immagini.....................................................................................................................14
   Colori di sfondo e decorazioni testo............................................................................................15
   I link e le classi............................................................................................................................17
   Conclusioni..................................................................................................................................19

Di cosa hai bisogno per questo libro?

Per capire la sintassi di questo libro è indispensabile avere le basi del linguaggio
html e per il resto bisogna avere un editor di testi come blocco notes di windows
oppure notepad++, mentre in ambiente linux va bene anche gedit ed in mac vi
consiglio textwrangler.

CAPITOLO 1

LE BASI
Esistono tre tipologie di CSS:
   1. Interno alla pagina html
   2. In linea
   3. Esterno

Per inserire il codice CSS all'interno della pagina html dobbiamo dichiararlo tra i
tags ...... e la sintassi è la seguente:

…......

Quindi tutto il codice CSS va inserito tra i tags ....... Il CSS in linea
mentre va inserito accanto al codice html, per esempio se vogliamo inserire un
paragrafo in html scriviamo il seguente codice:
testo del paragrafo. Immaginiamo adesso di voler scrivere il testo con
carattere Courier. Dobbiamo modificare la sintassi in questo modo:
testo del paragrafo. Per il momento anche se non
conosciamo il codice css inseriamo comunque la sintassi per l'esempio di cui sopra:

testo del paragrafo

Quindi immaginiamo un file html, ecco come sarà:

La mia pagina web

Testo del paragrafo

Infine esiste la possibilità di creare un file CSS esterno sul nostro server e di usarlo
per la pagina web, ecco la sintassi:

la mia pagina web

Vediamo di commentare un attimo il codice. In effetti con link rel=”stylesheet”
stiamo indicando un riferimento ad un file css esterno, per far capire di quale file si
tratta dobbiamo usare href=”esempio.css” se si tratta di un file che si trova nella
stessa cartella del nostro sito, oppure se si trova in un'altra cartella possiamo usare la
sintassi seguente:

In questo modo dobbiamo creare prima un file css esterno e poi richiamarlo in

questo modo. Per creare un file css esterno dobbiamo scriverne il codice senza usare
i tags  e  lo scriveremo direttamente nel file e lo salveremo come
.css.
La sintassi del codice css è del tipo
selettore {regola:proprietà ;}
In pratica il selettore è il tag su cui eseguiremo il codice, poi seguono le due
parentesi graffe entro cui inseriamo la regola e la proprietà che adesso impareremo e
non dimenticate mai il ; .

Gestire il testo

Iniziamo il nostro cammino illustrando le possibilità di formattazione del testo.
Come sappiamo dall'html il tag  è necessario in una pagina per racchiudere
tutto il testo della pagina web e quando vogliamo agire sul testo in generale del sito
dobbiamo usare questo selettore ed applicare su di esso il codice css. Immaginiamo
di voler usare per l'intera pagina web il carattere times new roman con dimensione
14 e colore rosso ed allineamento centrato. Ecco la sintassi:
body {font-family:”times new roman”;}
In pratica dichiariamo il selettore body poi tra parentesi graffe inseriamo la regola e
cioè font-family seguita da : ed il valore che in questo caso è times new roman che
essendo composto da più parole deve essere racchiuso fra virgolette. Ovviamente
dovete tener presente una cosa e cioè che gli utenti del sito possono impostare i loro
browser per mostrare un carattere diverso di default, quindi possiamo indicare la
possibilità di usare anche più testi alternativi separandoli da virgole.

Body {font-family:”times new roman”, courier, arial, garamound;}
Come avete visto abbiamo separato le possibilità con la virgola ed abbiamo chiuso la
parentesi graffa ed abbiamo inserito il ; che non dovete mai dimenticare. Per
dichiarare che il testo sia di dimensione 14 dobbiamo inserire il seguente codice:
body {font-size:14pt;}
In pratica font-size è la regola seguita dal valore espresso in pt (points). Mentre per
dichiarare il colore usiamo
body {color:red;}
quindi usiamo la regola color seguita dal nome del colore in inglese. Per esempio
per blu avremmo scritto body {color:blue;}. Per usare l'allineamento centrato
scriviamo:
body {text-align:center;}
quindi la regola è text-align seguita dai possibili valori:
   • center (centrato)
   • right (allineato a destra)

• left (allineato a sinistra)
   • justify (giustificato)

Ovviamente possiamo sintetizzare il codice in questo modo:
body {color:red;
     text-align:center;
    font-family:courier;
   font-size:14pt;}

In pratica possiamo dichiarare tutte le regole e valori su ogni rigo chiudendo con la ;
e mettendo solo due parentesi graffe.

CAPITOLO 2

Gestire i paragrafi

Se vogliamo applicare la formattazione del testo solo a porzioni di paragrafo allora
dobbiamo applicare la sintassi al selettore p. Immaginiamo come prima di voler il
testo rosso, allineato a centro, di dimensioni 14 e carattere Courier dovremmo
inserire il codice:
p {text-align:center;
  font-size:14pt;
  font-family:courier;
 color:red;}
Come avete visto non cambia nulla c'è solo il fatto che il codice viene applicato al
selettore p che è il tag html . Ecco il codice fino ad ora:

body {color:red;
    text-align:center;
    font-family:courier;

   font-size:14pt;}
p {text-align:center;
  font-size:14pt;
  font-family:courier;
 color:red;}

Scriviamo adesso un po' di testo e vediamo cosa succede:
Questo è il testo della pagina web che fa uso del carattere appartenente alla
famiglia courier di dimensioni 14 allineato a centro e di colore rosso.
Questo è il testo della pagina web che fa uso del carattere appartenente alla
famiglia courier di dimensioni 16 allineato a centro e di colore blu.

 Il tutto diventa in codice:

body {color:red;
    text-align:center;
    font-family:courier;

   font-size:14pt;}
p {text-align:center;
  font-size:16pt;
  font-family:courier;
 color:blue;}

Questo è il testo della pagina web che fa uso del carattere appartenente alla
famiglia courier di dimensioni 14 allineato a centro e di colore rosso.
Questo è il testo della pagina web che fa uso del carattere appartenente alla
famiglia courier di dimensioni 16 allineato a centro e di colore blu.

Se scrivete il codice seguente interno noterete che il primo testo sarà centrato di
dimensioni 14 e rosso mentre il secondo che è un paragrafo sarà blue e di
dimensioni 16. In pratica quando volete applicare a porzioni di testo una
formattazione diversa dovete applicare il codice al selettore che vi interessa

distinguere come in questo caso abbiamo fatto per il selettore p. Quando vogliamo
applicare ad un paragrafo un'interlinea usiamo la seguente sintassi:
p {line-height:2em}
quindi usiamo la regola line-height (altezza linea) ed esprimiamo la misura in em
oppure in pt (points), per esempio possiamo provare con
p {line-height: 3 pt;}

Ecco l'esempio di prima diventerebbe:
p {text-align:center;
 font-size:16pt;
 font-family:courier;
 color:blue;
line-height:3 pt;}

Adesso noterete il testo formattato in colore blu, dimensioni 16 centrato e se
aggiungiamo qualche riga come questa:
 Questo è il testo della pagina web che fa uso del carattere appartenente alla
famiglia courier di dimensioni 16 allineato a centro e di colore blu

In pratica abbiamo inserito un  vai a capo, ora noterete che c'è uno spazio di 3
pt fra le due righe del paragrafo che abbiamo creato. Se vogliamo inserire uno spazio
fra le parole usiamo la sintassi:
p {word-spacing:2 pt;}
in pratica usiamo la regola word-spacing ed inseriamo una misura in pt, nel nostro
esempio 2 punti. Se invece vogliamo inserire uno spazio fra le lettere delle parole
usiamo
p {letter-spacing:2 pt;}
Provate adesso ad inserire il codice completo degli esempi in questo modo:
p {text-align:center;
 font-size:16pt;

font-family:courier;
 color:blue;
line-height:3 pt
word-spacing:2pt;
letter-spacing:2pt;}
e notate i cambiamenti nella pagina web che state realizzando.

CAPITOLO 3

Tabelle ed immagini

Immaginiamo di voler avere tutte le tabelle della pagina di dimensioni esatte in
larghezza 400 pixel e altezza 300 px con colore di sfondo rosso, testo giallo e
allineamento dell'intera tabella a centro ed il testo nelle celle centrato e le celle
distanti l'una dall'altra di 3 pixel. Conoscendo il linguaggio html sappiamo che gli
attributi width e height si usano per le dimensioni e cioè rispettivamente la larghezza
e altezza della tabella. Mentre per il colore di sfondo della tabella usiamo l'attributo
background e per il testo usiamo color. Ecco come diventa
table {background:red;
      color:yellow;
     align:center;
     width:400;
     height:300;}
In pratica abbiamo dichiarato il colore rosso di sfondo e il colore giallo del testo,
l'allineamento della tabella a centro e le dimensioni. Ora dobbiamo applicare la
formattazione alle celle che sappiamo in html essere indicate con . Allora
scriviamo:
td {valign:center;
  cellspacing: 3 px;}

In effetti come in html la regola valign indica l'allineamento verticale del testo nelle
celle e cellspacing indica lo spazio fra le celle in pixel.

Colori di sfondo e decorazioni testo

Abbiamo visto come è possibile applicare un colore al testo, una dimensione, una
famiglia di caratteri ed un allineamento. In effetti possiamo stabilire di applicare un
colore di sfondo per l'intera pagina web con questa sintassi:
body {background:colore;}
Possiamo anche stabilire di usare una immagine come sfondo della pagina in questo
modo:
body {background-image:url (percorso dell'immagine);}
In pratica supponendo che la nostra immagine si trovi nella stessa cartella del sito e
si chiami prova.gif useremo la seguente sintassi:
body {background-image:url (prova.gif);}
Così facendo però l'immagine potrebbe essere ripetuta per tutta la pagina, se invece
non vogliamo che si ripeti allora usiamo la seguente sintassi:
body {background-image:url (prova.gif);
     background-repeat:no-repeat;}
In pratica usiamo la regola background-repeat seguita dai possibili valori che sono:
   • no-repeat (non ripetere)
   • repeat (ripeti)
Se vogliamo che l'immagine resti fissa mentre l'utente scorre la pagina usiamo la
seguente sintassi:
body {background-image:url (prova.gif);
     background-attachement:fixed
quindi usiamo la regola background-attachement seguita dai possibili valori:
fixed (rimane fissa)
scroll (scorre con la pagina)
Per applicare il grassetto al testo usiamo la seguente sintassi:
body oppure p {font-weight:bold;}
la regola font-weight può avere come valore bold (grassetto) , bolder (maggior

grassetto). Immaginiamo invece di voler il testo in corsivo usiamo la seguente
sintassi

p {font-style:italic;}
font style è la regola mentre il valore italic vuol dire corsivo. Se vogliamo invece
una decorazione del testo per esempio sottolineato usiamo la seguente sintassi
p {text-decoration:underline;}
abbiamo così la regola text-decoration seguita dai possibili valori:
   • underline:sottolineato
   • overline:sopralineato
   • line-trought:sbarrato
Se invece vogliamo che ogni prima lettera di una parola sia in maiuscolo usiamo la
seguente sintassi:
p {text-transform:Capitalize;}
abbiamo usato quindi la regola text-transform seguita dai possibili valori:
   • Capitalize:la prima lettera di ogni parola maiusacola
   • uppercase:tutto il testo in maiuscoletto
   • lowercase:tutto il testo in minuscolo

I link e le classi

Immaginiamo di voler formattare con il colore rosso i link visitati in una pagina,
mentre quelli ancora da visitare in blu e quando l'utente si posiziona con il mouse
sopra al link vogliano che il colore sia giallo. Ecco la sintassi
a:visited {color:red;}
a          {color:blue;}
a:hover {color:yellow;}
Con la prima riga di codice abbiamo indicato al browser che per i link visitati il
colore del testo sia rosso, mentre con la seconda riga di codice indichiamo che i link
non ancora visitati abbiano il testo di colore blue e con la terza riga di codice
indichiamo che quando l'utente passa con il mouse su un link il testo diventi giallo.
A volte abbiamo la necessità di formattare tutti i paragrafi della pagina in un certo
modo mentre solo alcuni di essi in un altro modo. Possiamo farlo usando le classi.
Per capire facciamo un esempio con il seguente codice:
p {color:red;
    font-size:14pt;}
Con questo codice stiamo praticamente affermando che vogliamo per i paragrafi il
testo di dimensioni 14 e rosso. Ma così facendo tutti i paragrafi saranno così.
Immaginiamo che solo per un paragrafo vogliamo differenziare la sintassi, allora
usiamo un codice come il seguente:
p.nomeclasse {codice css}
in pratica dobbiamo dare un nome alla nostra classe per esempio la chiamiamo
classe e scriviamo il codice seguente:
p.classe {color:blue;
           font-size:16pt;}

ora come facciamo a differenziare i paragrafi?.

Presto detto:

p {color:red;
 font-size:14pt;}
p.classe {color:blue;
           font-size:16pt;}

Questo codice è formattato in rosso e di dimensioni 14 pixel
Questo codice è formattato in blu e dimensioni 16

In pratica creando la classe di nome classe l'abbiamo dichiarato con  e quindi a tutto il paragrafo con la classe dichiarata sarà
applicato il codice css di cui sopra. Ovviamente le classi le possiamo applicare a
qualsiasi selettore, per esempio potremmo creare una classe per distinguere i colori
dei link dell'esempio di prima.

Conclusioni

Siamo giunti al termine di questo breve percorso sul linguaggio CSS. Abbiamo
affrontato la sintassi di base ma sicuramente se mettete in pratica i consigli sarete in
grado di modificare e stilizzare le vostre pagine web.

Per ogni dubbio scrivetemi a: tonymercurio75@gmail.com