Stile Pagina
Aggiungere uno stile
Per modificare lo stile grafico di una pagina web, di un tag o semplicemente il colore di un testo c’è bisogno dell’attributo <style>, come ogni attributo va inserito dopo il tag.
<tag style="proprietà:valore;""> </tag>
La proprietà e il valore sono elementi CSS, negli esempi seguenti vi mostrerò come inserirli in una pagina HTML, quando studieremo i CSS questi stili grafici saranno presenti una pagina diversa con estensione .css.
Background-color
La proprietà Background-color cambia il colore di sfondo della pagina web, l’attributo style viene inserito nel tag <body> :
<body style="background-color: red;>
<h1>Cambio colore di sfondo</h1>
<p> adesso lo sfondo della pagina è di colore rosso</p>
</body>
Color
La proprietà color modifica il colore del testo in quello inserito nel valore, in questo esempio ad esempio è blue:
<p style="color: blue;"> Il testo di questo paragrafo è di colore blu</p>
Il testo di questo paragrafo è di colore blu
Quando si vuole inserire un colore di sfondo o cambiare colore ad un testo è possibile usare il nome, come nell’esempio precedente, oppure utilizzare i valori numerici (rgb, hex, hsl, rgba,hsla).
Nello standard 3WC ci sono ben 140 nomi che possiamo utilizzare e sono disponibili nella pagina Colori HTML, in questa tabella trovate sulla sinistra il nome del colore e affianco il valore numerico della tavoletta dei colori (HEX).
Come potete immaginare è molto più semplice ricordarsi il nome piuttosto che il valore HEX, ma qualsiasi dei due valori utilizziamo il risultato resta sempre lo stesso.
Border
Per inserire un bordo in un paragrafo o un’intestazione possiamo usare la proprietà border, i valori di questa proprietà sono la dimensione del bordo, la forma e il colore.
Ecco un esempio:
<h1 style="border: 2px solid Tomato;">Questo bordo è arancione</h1>
<p style="border: 2px solid Violet;"> Questo bordo è viola</h1>
Questo bordo è arancione
Questo bordo è viola
Font-family
La proprietà font-family modifica appunto il font di un testo, ci sono vari font in informatica che si possono utilizzare, facciamo alcuni esempi:
<p style="font-family: Arial;">Questo testo è scritto in Arial</p>
<p style="font-family: Verdana;">Questo testo è scritto in Verdana </p>
<p style="font-family: Times New Roman;">Questo testo è scritto in Times New Roman</p>
Questo testo è scritto in Arial
Questo testo è scritto in Verdana
Questo testo è scritto in Times New Roman
Font-size
La proprietà font-size modifica la dimensione del testo, si può scrivere la dimensione in percentuali, in em e in px.
<p style="font-size: 200%;"> Questo testo è ingrandito del 200</p>
<p style="font-size: 24px;">Questo testo è di dimensione 24px</p>
<p style="font-size: 2em;">Questo testo è di dimensione 2em</p>
Questo testo è ingrandito del 200%
Questo testo è di dimensione 24px
Questo testo è di dimensione 2em
Text-Align
La proprietà text-align allinea il testo a sinistra, lo posiziona al centro o lo porta sulla destra per esempio:
<p style="text-align: left;">Questo testo è a sinistra</p>
<p style="text-align:center;">Questo testo è centrato</p>
<p style="text-align:right;">Questo testo è a destra</p>
Questo testo è a sinistra
Questo testo è centrato
Questo testo è a destra
Generalmente si usa spesso il “text-align: center;” quando si vuole centrare un testo importante come un titolo.
Piccola precisazione: il "text-align:left" se viene inserito o meno in questo caso non cambia assolutamente nulla, infatti, il testo dell’HTML è sempre allineato a sinistra di default. Più avanti quando parleremo di div o di float sarà invece molto utile per mantenere il testo sulla sinistra.