back to top

Stilizzare e formattare il testo coi CSS

Nella precedente lezione abbiamo giร  visto unโ€™importante proprietร  del testo, cioรจ la proprietร  color attraverso la quale รจ possibile definire il colore degli elementi testuali. Vediamo adesso quali sono le principali proprietร  CSS per la stilizzazione del testo.

Per prima cosa vediamo le proprietร  della famiglia font attraverso le quali รจ possibile impostare il tipo di carattere da utilizzare, le dimensioni del font, il corsivo ed il grassetto. Queste proprietร  sono:

  • font-family
  • font-size
  • font-style
  • font-weight

Vediamo un esempio che contempla tutte e quattro queste proprietร  CSS:

p
{
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
}

Vediamole una ad una.

font-family

La proprietร  font-family permette di impostare uno o piรน caratteri tipografici (cd. font) per il testo. In questo modo il web-designer ha la facoltร  di specificare quale tipo di font vuole utilizzare per specifici blocchi di testo; รจ possibile, ad esempio, impostare un tipo di caratteri differente per gli heading (H1, H2, ecc.) e per il testo:

h1, h2, h3
{
  font-family: 'Comic Sans', coursive;  
}
p
{
  font-family: verdana, arial, sans-serif;    
}

Ma perchรจ abbiamo indicato piรน di un carattere? Semplicemente perchรจ รจ stato previsto un meccanismo tale per cui qualora il primo carattere non fosse presente sul computer client che visualizza la pagina verrร  utilizzato il secondo, altrimenti il terzo, e cosi via. Eโ€™ bene ricordare, infatti, che nelle specifiche di CSS 2.1 il font specificato nella proprietร  font-family fa sempre riferimento alla libreria di caratteri installati allโ€™interno del computer client.

Solitamente lโ€™ultima posizione (nel nostro caso corrispondente a "sans-serif") รจ utilizzata per specificare la "famiglia del font" in modo generico in modo da suggerire al client, in caso di assenza di tutti i font specificati, di utilizzare quello di default per quella data famiglia.

Le famiglie di caratteri tipografici sono:

  • serif
  • sans-serif
  • coursive
  • fantasy
  • monospace

Si noti ancora che i caratteri tipografici i cui nomi sono composti da piรน di una parola vanno scritti tra singoli apici, come ad esempio:

font-family: 'times new roman';

Eโ€™ bene precisare che per una corretta visualizzazione delle nostre pagine web รจ bene limitarsi allโ€™utilizzo dei caratteri piรน diffusi come ad esempio:

  • arial
  • verdana
  • tahoma
  • times new roman

font-size

La proprietร  font-size permette di impostare la dimensione del testo. Questa puรฒ essere utilizzata specificando un valore percentuale oppure numerico seguito da un unitร  di misura (solitamente si usa "px", "pt" o "em"). In alternativa รจ possibile utilizzare una keyword tra "xx-small", "x-small", "small", "medium", "large", "x-large" e "xx-large".

Vediamo un esempio:

p {
  font-size: 12px;    
}
p.piccolo {
  font-size: small;    
}

Si noti che la definizione in pixel (px) o punti (pt) consente di specificare in modo diretto la dimensione del testo, utilizzando "em", percentuali o una delle keyword citate, invece, la dimensione del testo viene calcolata in modo automatico dal browser sulla base dei valori esplicitati per lโ€™elemento contenitore.

font-style e font-weight

Le proprietร  font-style e font-weight trasformano il carattere utilizzato impostando rispettivamente uno stile (ad esempio "italic") e il grassetto ("bold"). Il valore di default per entrambi รจ "normal".

Vediamo qualche esempio di utilizzo:

span.grassetto
{
  font-weight: bold;
}
span.corsivo
{
  font-style: italic;
}

Si noti che attraverso queste proprietร  รจ possibile anche sovvertire la stilizzazione di default impostata per taluni tag come <b> e <i>, in questo modo:

/* Tolgo il grassetto ai tag b e strong */
b, strong
{
  font-weight: normal;
}
/* Tolgo l'italico ai tag i e em */
i, em
{
  font-style: normal;
}

La proprietร  font

Anche per questa famiglia esiste una versione compatta rappresentata dalla proprietร  font. Anche questa volta possiamo usare una singola proprietร  CSS per definire tutti gli aspetti della relativa famiglia in un colpo solo. Vediamo un esempio:

p
{
  font: italic bold 12px/1.5 arial, tahoma, sans-serif;    
}

Gli unici valori obbligatori sono font-size e font-family; tutti gli altri sono facoltativi. Ad esempio:

p
{
  font: 12px arial, tahoma, sans-serif;    
}

Una precisazione importante: nel primo esempio di questa proprietร  abbiamo definito il font-size in questo modo:

12px/1.5

In realtร , con questa sintassi, abbiamo definito non solo la dimensione del font (12px) ma anche il valore di line-height (1.5). Vedremo in seguito a cosa corrisponde questโ€™ultima proprietร .

Le proprietร  della famiglia text

Oltre alle proprietร  della famiglia font, CSS prevede altre proprietร  per la stilizzazione degli elementi di testo. Si tratta delle proprietร  della famiglia text, cioรจ:

  • text-align
  • text-decoration
  • text-indent
  • text-transform

text-align

Attraverso la proprietร  text-align รจ possibile definire lโ€™allineamento del testo in senso orizzontale; possiamo, ad esempio, impostare un testo a destra oppure centrato a seconda dei nostri gusti e delle nostre esigenze. Questa proprietร  ammette questi valori:

  • left โ€“ (default) allineamento a sinistra;
  • right โ€“ allinemaneto a destra;
  • center โ€“ allineamento centrato;
  • justify โ€“ allineamento giustificato.

Vediamo un esempio:

p.articolo
{
    text-align: justify;
}

text-decoration

Questa proprietร  CSS consente di applicare una "decorazione" al testo. I valori possibili sono:

  • none โ€“ (default) nessuna decorazione;
  • underline โ€“ mette una linea sotto al testo (testo sottolineato);
  • overline โ€“ mette una linea sopra al testo;
  • line-through โ€“ testo barrato (euqivalente al tag HTML <strike>).

Vediamo un esempio:

span.sottolineato
{
    text-decoration: underline;
}

text-indent

Questa proprietร  รจ utilizzata per specificare il rientro da sinistra della prima linea di un blocco di testo. Ammette valori percentuali o numerici accompagnati da unโ€™unitร  di misura (ad esempio "px"):

span.tab
{
    text-indent: 100px;
}

text-transform

La proprietร  text-transform permette di variare il case di un testo. Ammette i seguenti valori:

  • none โ€“ (default) nessuna trasformazione;
  • capitalize โ€“ mette in maiuscolo la prima lettera di ciascuna parola;
  • uppercase โ€“ mostra tutto il testo in maiuscolo;
  • lowercase โ€“ mostra tutto il testo in minuscolo.

Qualche esempio:

span.maiuscolo
{
    text-transform: uppercase;
}
span.minuscolo
{
    text-transform: lowercase;
}
span.iniziali_maiuscole
{
    text-transform: capitalize;
}
Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).