Stili CSS per il Testo

CSS offre un controllo preciso sull'aspetto del testo. Questa pagina illustra le principali proprietà del testo che utilizzerai più spesso — cosa fa ciascuna, i valori accettati e un esempio minimo eseguibile per ognuna. Ogni proprietà rimanda al proprio capitolo dedicato dove puoi approfondire.

Colore del Testo

La proprietà color imposta il colore del testo di un elemento (e, per impostazione predefinita, delle sue decorazioni come le sottolineature). Puoi specificare il valore come parola chiave di colore (red), un valore HEX (#ff0000), un valore rgb() / rgba() (rgb(255 0 0)), oppure un valore hsl(). Poiché color viene ereditata, impostarla su un contenitore la applica a tutto il testo discendente, a meno che un elemento figlio non la sovrascriva.

Esempio di utilizzo della proprietà CSS color:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="color:#ff0000">This is some paragraph in red.</p>
  </body>
</html>

Provalo tu stesso »

Risultato

Allineamento del Testo

La proprietà di allineamento viene utilizzata per allineare il testo all'interno di un elemento a sinistra, a destra, al centro, ecc.

L'allineamento del testo ha quattro valori:

Left (text-align: left) - allinea il testo a sinistra
Right (text-align: right) - allinea il testo a destra
Center (text-align: center) - posiziona il testo al centro della pagina
Justify (text-align: justify) - estende la riga di testo per allineare sia il margine sinistro che quello destro (come nelle riviste e nei giornali)

Per impostazione predefinita, i browser allineano il testo all'inizio della riga — a sinistra nelle lingue da sinistra a destra come l'italiano. Usa il valore corrispondente quando hai bisogno di un allineamento diverso. Per un allineamento sensibile alla lingua, preferisci le parole chiave logiche start e end rispetto a left e right.

Esempio di utilizzo della proprietà CSS text-align:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is some paragraph</p>
    <p style="text-align:center">Some paragraph with value center.</p>
    <p style="text-align:right">Some paragraph with value right.</p>
    <p style="text-align:justify">Some paragraph with value justify.</p>
  </body>
</html>

Provalo tu stesso »

Decorazione del Testo

La proprietà text-decoration aggiunge linee al testo. Nel CSS moderno è una scorciatoia per CSS text-decoration-line, CSS text-decoration-color e CSS text-decoration-style. I valori più comuni per la parte text-decoration-line sono:

Overline (text-decoration: overline) - disegna una linea sopra il testo
Underline (text-decoration: underline) - disegna una linea sotto il testo
Line-through (text-decoration: line-through) - disegna una linea attraverso il centro del testo
None (text-decoration: none) - rimuove qualsiasi decorazione; questo è ciò che si usa per eliminare la sottolineatura predefinita dai link

Esempio di utilizzo della proprietà CSS text-decoration:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a style="text-decoration:none">This is link without underline</a>
    <h1 style="text-decoration:overline">Heading with value overline.</h1>
    <p style="text-decoration:line-through">Some paragraph with value line-through.</p>
    <a style="text-decoration:underline">Some hyperlink with value underline.</a>
  </body>
</html>

Provalo tu stesso »

Risultato

Trasformazione del Testo

La proprietà transform viene utilizzata per controllare la capitalizzazione del testo. Ciò significa che puoi impostare il testo in maiuscolo, minuscolo o con la prima lettera di ogni parola maiuscola (title case).

La proprietà transform ha i seguenti valori:

Uppercase (text-transform: uppercase) - converte tutti i caratteri in maiuscolo
Lowercase (text-transform: lowercase) - converte tutti i caratteri in minuscolo
Capitalize (text-transform: capitalize) - converte il primo carattere di ogni parola in maiuscolo
None (text-transform: none) - lascia il testo così come digitato; questo è il valore predefinito

Tieni presente che text-transform cambia solo come il testo viene visualizzato — il contenuto HTML sottostante rimane esattamente come l'hai scritto, il che è importante per copia-incolla e accessibilità.

Esempio di utilizzo della proprietà CSS text-transform:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="text-transform:uppercase">Paragraph with uppercase.</p>
    <p style="text-transform:lowercase">Paragraph with lowercase.</p>
    <p style="text-transform:capitalize">Paragraph with capitalize.</p>
  </body>
</html>

Provalo tu stesso »

Risultato

Ombra del Testo

La proprietà text-shadow aggiunge una o più ombre al testo. Ogni ombra è descritta da fino a quattro valori, in questo ordine:

text-shadow: h-shadow v-shadow blur-radius color;

h-shadow (obbligatorio) - offset orizzontale; valori positivi spostano l'ombra a destra, negativi a sinistra.
v-shadow (obbligatorio) - offset verticale; valori positivi spostano l'ombra in basso, negativi in alto.
blur-radius (opzionale) - quanto è morbida l'ombra; valori più grandi la sfumano di più (il valore predefinito è 0).
color (opzionale) - il colore dell'ombra; se omesso, il browser usa il color dell'elemento.

Puoi sovrapporre più ombre separandole con virgole, ed è così che si creano effetti di bagliore e contorno.

Esempio di utilizzo della proprietà CSS text-shadow:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-shadow: 2px 2px 4px #888888;
      }
      h2 {
        /* Two shadows stacked to create a glow */
        text-shadow: 0 0 6px #ff0000, 0 0 12px #ff0000;
      }
    </style>
  </head>
  <body>
    <h1>Heading with a soft drop shadow</h1>
    <h2>Heading with a red glow</h2>
  </body>
</html>

Consulta il capitolo CSS text-shadow per ulteriori esempi.

Rientro del Testo

La proprietà di rientro del testo viene utilizzata per specificare la lunghezza dello spazio vuoto della prima riga in un blocco di testo. I valori seguenti sono validi per questa proprietà:

Length, che specifica il rientro in px, pt, cm, em, ecc. Il valore predefinito è 0. Sono ammessi valori negativi.
Percentage, che specifica il rientro come percentuale della larghezza del blocco contenitore.
Each-line, quando il rientro interessa la prima riga così come ogni riga dopo un'interruzione di riga forzata, ma non le righe dopo un'interruzione di riga automatica.
Hanging, che inverte quali righe vengono rientrate. La prima riga non viene rientrata.
Initial, che fa sì che la proprietà utilizzi il suo valore predefinito.
Inherit, che eredita la proprietà dall'elemento padre.

Esempio di utilizzo della proprietà CSS text-indent:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h2>Text Indentation Example</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Provalo tu stesso »

Spaziatura tra Lettere

La proprietà CSS letter-spacing consente di definire gli spazi tra le lettere/caratteri in un testo. I seguenti valori sono supportati da questa proprietà:

Normal, che indica che non ci saranno spazi aggiuntivi tra i caratteri. È il valore predefinito di questa proprietà.
Length, che definisce uno spazio aggiuntivo tra i caratteri. Sono ammessi valori negativi.
Initial, che fa sì che la proprietà utilizzi il suo valore predefinito.
Inherit, che eredita la proprietà dall'elemento padre.

Esempio di utilizzo della proprietà CSS letter-spacing:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
        letter-spacing: 5px;
      }
      h3 {
        letter-spacing: -1px;
      }
    </style>
  </head>
  <body>
    <h2>Example of letter-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Here is some text with letter-spacing property.
    </h3>
  </body>
</html>

Provalo tu stesso »

Altezza della Riga

La proprietà line-height definisce l'altezza della riga. Viene utilizzata per impostare l'interlinea delle righe di un testo. Se il valore di line-height è maggiore del valore di font-size di un elemento, la differenza sarà l'interlinea del testo. Ecco i valori supportati da questa proprietà:

Normal, che definisce un'altezza di riga normale. È il valore predefinito di questa proprietà.
Length, che definisce un'altezza di riga fissa in px, cm ecc.
Number, che definisce un numero che viene moltiplicato per la dimensione del carattere corrente per impostare l'altezza della riga.
%, che definisce un'altezza di riga in percentuale della dimensione del carattere corrente.
Initial, che fa sì che la proprietà utilizzi il suo valore predefinito.
Inherit, che eredita la proprietà dall'elemento padre.

Un valore number senza unità (ad esempio line-height: 1.5) è di solito la scelta più sicura, perché si adatta alla dimensione del carattere di ciascun elemento ed evita sorprese nell'ereditarietà.

Esempio di utilizzo della proprietà CSS line-height:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        line-height: 30px;
      }
      h3 {
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <h2>Example of line-height property</h2>
    <p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3> 
  </body>
</html>

Provalo tu stesso »

Spaziatura tra Parole

Con l'aiuto della proprietà CSS word-spacing possiamo cambiare lo spazio tra le parole in un testo, non i singoli caratteri. Supporta i valori seguenti:

Normal, che specifica una spaziatura normale tra le parole. Questo è il valore predefinito di questa proprietà.
Length, che specifica una spaziatura aggiuntiva tra le parole. Può essere specificata in px, pt, cm, em, ecc. Sono ammessi valori negativi.
Initial, che fa sì che la proprietà utilizzi il suo valore predefinito.
Inherit, che eredita la proprietà dall'elemento padre.

Esempio di utilizzo della proprietà CSS word-spacing:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        word-spacing: 1em;
      }
      h3 {
        word-spacing: -3px;
      }
      span {
        display: block;
        word-spacing: 3rem;
      }
    </style>
  </head>
  <body>
    <h2>Example of word-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3>
    <span>
    Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
    </span>
  </body>
</html>

Provalo tu stesso »

Esercitazione

Pratica

Quale delle seguenti proprietà puoi usare per controllare l'aspetto del testo in CSS?