Corso di CSS - Lezione 3 - Proprietà background-color, font-style, font-weight, text-align, text-decoration, text-transform.

10/10/2025, by Ivan

Nel corso del tempo, con l’evoluzione dell’HTML e l’uso diffuso dei CSS, molti tag sono diventati obsoleti e dovrebbero essere evitati — tra questi ci sono , ,  e <center>. Più avanti vedremo altri tag “vietati”. Le proprietà CSS che imparerai ti permetteranno di eliminare codice superfluo dall’HTML e di spostare la formattazione nei file CSS, dove è più corretto che stia.

Nella lezione precedente abbiamo visto come aggiungere proprietà CSS e scegliere i colori. In questa lezione analizzeremo una serie di proprietà che probabilmente hai già incontrato studiando HTML, ma che d’ora in poi applicheremo tramite CSS — il modo più corretto di farlo.

La prima proprietà che vedremo oggi è background-color.

Background-color

Questa proprietà può essere utilizzata non solo per impostare il colore di sfondo dei blocchi, ma anche per il testo o i link. Ad esempio:

span {
  background-color: yellow;
}

Oppure per un collegamento:

a {
  background-color: blue;
}

Background color

Come per la proprietà color, i colori possono essere definiti anche tramite codici numerici, ad esempio #ff0000 (che rappresenta il rosso).

Font-style

Avrai sicuramente visto tag come  o  (grassetto),  (corsivo) o  (un “tag cattivo” che modifica il testo in modo arbitrario). Per sostituire tutti questi tag, esiste la proprietà CSS font-style. I valori più comuni sono i seguenti:

p {
  font-style: italic; /* corsivo */
}

In questo modo sostituiamo il tag  con la proprietà font-style impostata su italic.

font-style

Font-weight

Tra i tag obsoleti troviamo anche , che rende il testo in grassetto. Ora basta utilizzare la proprietà font-weight:

body {
  font-weight: normal; /* font normale */
}

p {
  font-weight: 400; /* font normale */
}

span {
  font-weight: 700; /* font in grassetto */
}

a {
  font-weight: bold; /* font in grassetto */
}

Per la proprietà font-weight i valori possibili sono 400 o normal per il testo normale, e 700 o bold per il grassetto.

CSS font-weight

Text-align

La proprietà text-align ha sostituito il tag <center> e l’attributo HTML align. Ecco alcuni esempi di utilizzo:

body {
  text-align: left; /* allineamento a sinistra */
}

p {
  text-align: justify; /* giustificato */
}

span {
  text-align: right; /* allineamento a destra */
}

div {
  text-align: center; /* centrato */
}

L’immagine qui sotto mostra chiaramente l’effetto di questa proprietà:

CSS text-align

Text-decoration

Al posto dei tag <strike> (testo barrato) e  (sottolineato) possiamo ora usare la proprietà text-decoration:

.underline {
  text-decoration: underline; /* sottolineato */
}

.line-through {
  text-decoration: line-through; /* barrato */
}

CSS text-decoration

Text-transform

Un’altra proprietà CSS utile è text-transform. Serve per trasformare il testo in maiuscolo o minuscolo.

CSS text-transform

Non cercare di memorizzare subito tutte le proprietà CSS. Se tornerai di tanto in tanto a quelle che usi più spesso, con il tempo le ricorderai automaticamente. Le altre potrai sempre consultarle quando ne avrai bisogno.

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs