Esiste un particolare attributo che serve per dare uno stile a un elemento qualsiasi all'interno della pagina web, utilissimo per renderlo più gradevole. Vediamo qual è.
Per applicare uno stile a un elemento, si utilizza l'attributo style=”valore” all'interno di un tag, che può essere, per esempio, un'immagine (<img>) o un semplice paragrafo (<p>). I suoi utilizzi sono però molto più ampi, perché può essere inserito praticamente in qualsiasi tag.
Questo attributo utilizza il linguaggio CSS, che potrai approfondire nel corso dedicato.
Per creare un paragrafo, come abbiamo visto, si utilizza il tag <p>. Per applicare uno stile al testo contenuto nel paragrafo possiamo utilizzare <p style=”valore”> … </p>. Vediamo alcuni esempi di valori.
Il valore color:red cambia il colore del testo in rosso. Al posto di red puoi inserire anche altri colori, come green o blue.
<p style="color:grey">Un testo in grigio</p>
Il valore font-size:20px cambia la dimensione del testo. Puoi utilizzare diverse unità di misura, tra cui i pixel (px) oppure le percentuali (ad esempio 20%) rispetto alla dimensione predefinita.
<p style="font-size:10px">Un testo piccolo</p>
Il valore font-weight:bolder cambia lo spessore del testo. In questo caso viene utilizzato bolder, ma puoi inserire anche un valore numerico (quello predefinito è 400).
<p style="font-weight:900">Un testo molto spesso</p>
Il valore font-family:Arial cambia il tipo di carattere del testo. Puoi specificarne più di uno, separandoli con una virgola, nel caso in cui il computer dell'utente non disponga del primo. Verrà utilizzato il primo carattere disponibile.
<p style="font-family:verdana,arial,calibri">Un testo con font</p>
Il valore text-align:center allinea il testo al centro. Oltre a center, puoi utilizzare left per allinearlo a sinistra, right per allinearlo a destra e justify per giustificare il testo.
<p style="text-align:center">Questo testo rimane<br/>
allineato al centro grazie all’attributo<br/>text-align in style</p>
Puoi inserire più proprietà all'interno dello stesso attributo style, separandole con il punto e virgola (;).
<p style="font-family:verdana;font-size:18px;font-weight:bolder;color:yellow">Un testo con tanti stili</p>
Puoi utilizzare anche le proprietà height e width all'interno dell'attributo style, come nell'esempio seguente.
<img src="immagine.jpg" style="height:100px;width:100px">