Esiste un particolare attributo che serve per dare uno stile ad un elemento qualsiasi all’interno della pagina web, utilissimo per renderlo più carino. Vediamo qual è.
Lo stile
Per creare lo stile per un oggetto, si usa l’attributo style=”valore” all’interno di un elemento, che può essere per esempio un immagine (<img>) o un semplice paragrafo (<p>). Ha però usi molto più vasti, perché può essere inclusi praticamente all’interno di qualsiasi tag.
Questo tag utilizza il linguaggio CSS, che potrai trovare in modo più approfondito nel corso dedicato.
Lo stile nei paragrafi
Per creare un paragrafo, come abbiamo visto, si utilizza il tag <p>. Per dare uno stile al testo all’interno del paragrafo possiamo utilizzare <p style=”valore”> … </p>. Vediamo degli esempi di valori.
Il valore color:red – cambia il colore del testo in rosso. Puoi inserire anche green, blue, ecc.
<p style="color:grey">Un testo in grigio</p>
Il valore font-size:20px – cambia la dimensione del testo. Puoi usare l’unità di misura dei pixel (px) o delle percentuali (ad esempio 20%) rispetto alla pagina.
<p style="font-size:10px">Un testo piccolo</p>
Il valore font-weight:bolder – cambia lo spessore delle lettere, in questo caso in grassetto (bolder), ma puoi inserire anche un valore (di default è 400).
<p style="font-weight:900">Un testo molto spesso</p>
Il valorefont-family:arial – cambia il tipo di carattere del testo. Puoi inserirne più di uno, divisi da una virgola, se il computer dell’utente non li dovesse leggere. Viene visualizzato sempre 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 usare left e right se a sinistra o a destra e justify per testo giustificato.
<p style="text-align:center">Questo testo rimane<br/>
allineato al centro grazie all’attributo<br/>text-align in style</p>
Puoi inserire questi attributi insieme dividendoli con il punto e virgola.
<p style="font-family:verdana;font-size:18px;font-weight:bolder;color:yellow">Un testo con tanti stili</p>
Lo stile nelle immagini
Puoi inserire height e width all’interno dell’attributo style, come nell’esempio qui sotto.
<img src="immagine.jpg" style="height:100px;width:100px">
| Prossima lezione |