08 – Stili HTML

L’attributo HTML style viene utilizzato per aggiungere stili a un elemento, come colore, carattere, dimensione e altro.

Esempio

Sono Arancione

Io sono verdelime

Io sono grande


L’attributo di stile HTML

L’impostazione dello stile di un elemento HTML può essere eseguita con l’ style attributo.
L’attributo HTML style ha la seguente sintassi:

<tagname style="property:value;">

La proprietà è una proprietà CSS. Il valore è un valore CSS.

Imparerai di più sui CSS più avanti nel corso.


Colore di sfondo

La proprietà CSS background-color definisce il colore di sfondo per un elemento HTML.

Esempio
Imposta il colore di sfondo di una pagina in giallo:

<body style="background-color:yellow;">

<h1>Questo è un Titolo</h1>
<p>Questo è un paragrafo.</p>
<p>Questa pagina ha uno sfondo giallo</p>

</body> 

Esempio
Imposta il colore di sfondo per due diversi elementi:

<body>

<h1 style="background-color:orange;">Questo è il Titolo</h1>
<p style="background-color:violet;">Questo è il paragrafo.</p>

</body> 

Colore del testo

La proprietà CSS color definisce il colore del testo per un elemento HTML:

Esempio

<h1 style="color:yellow;">Questo è il Titolo</h1>
<p style="color:red;">Questo è il paragrafo.</p> 

Font

La font-family proprietà CSS definisce il carattere da utilizzare per un elemento HTML:

<h1 style="font-family:courier;">Questo è un Titolo</h1>
<p style="font-family:verdana;">Questo è un paragrafo.</p> 

Dimensione del testo

La proprietà CSS font-size definisce la dimensione del testo per un elemento HTML:

Esempio

<h1 style="font-size:280%;">Questo è un Titolo</h1>
<p style="font-size:170%;">Questo è un paragrafo.</p> 

Allineamento del testo

La proprietà CSS text-align definisce l’allineamento orizzontale del testo per un elemento HTML:

Esempio

<h1 style="text-align:center;">Centratura Titolo</h1>
<p style="text-align:center;">Centratura paragrafo.</p>

Riassunto capitolo

  • Usa l’ style attributo per dare uno stile agli elementi HTML
  • Utilizzare background-color per il colore di sfondo
  • Utilizzare color per i colori del testo
  • Utilizzare font-family per i caratteri di testo
  • Utilizzare font-size per le dimensioni del testo
  • Utilizzare text-align per l’allineamento del testo

Pubblicato da Luca Bocaletto

Sviluppatore, Creatore, Musicista, Artista, Radiantista, Scacchista.