STILI HTML

Sintassi di base

Sfondo della pagina

Colore del testo

Colore sfondo del testo

Cornice attorno al testo

Carattere e dimensione testo

allineamento del testo

Per modificare lo stile dei nostri documenti Html si utilizza l’ attributo style.

Ogni tag HTML può contenere attributi che si inseriscono nel tag di apertura , e sono formati da una coppia di chiave valore.

1. Sintassi di base

La sintassi di base per utilizzare l’attributo style è la seguente :

<nometag style = ” chiave : valore;” >

Dove sia la chiave che il valore sono elementi di CSS (Css è un linguaggio utilizzato nella costruzione di pagine Web, che agisce in maniera complementare al linguaggio Html, responsabile per l’aspetto grafico della pagina, che vedremo successivamente).

2. Sfondo della pagina html

Attraverso la proprietà background-color dell’ attributo style, è possibile assegnare un colore di sfondo alle nostre pagine html.

Vediamolo subito con un esempio pratico.

<html>
<body style=”background-color:green;”>
<h1>Titolo della nostra pagina verde</h1>
</body>
</html>

Prima di proseguire , a voi una breve spiegazione del codice che abbiamo appena visto.

<body si tratta del tag che contraddistingue il corpo della nostra pagina
<body style=”background-color:green;”> attributo style ( elemento che fornisce informazioni aggiuntive su nostro tag) e che va inserito nel tag di apertura.

formato da una coppia di chiave (background-color) , valore (green)

3. Colore del testo

Attraverso la proprietà color dell’ attributo style, è possibile assegnare un colore al nostro testo html.

<html>
<body>
<body style=”background-color:green;”>
<h1 style=”color:red”>titolo rosso</h1>
<p style=”color:white”>paragrafo bianco</p>
</body>
</html>

I colori ammessi in HTML sono :

nomi colore ( gray , green , white , orange ecc.. )
RGB
RGBA
HEX
HSL
HSLA

4. Colore dello sfondo del testo

Attraverso la proprietà background-color dell’ attributo style, è possibile assegnare un colore non solo al testo ma anche allo sfondo di determinati testi.

<html>
<body style=”background-color:black;”>>
<h1 style=”background-color:pink;”>TITOLO SU SFONDO ROSA</h1>
<p style=”background-color:white;”>PARAGRAFO SU SFONDO BIANCO</p>
</body>
</html>

5. Cornice attorno al testo

E’ possibile creare attorno agli elementi di html una cornice colorata tramite la proprietà border

<html>
<body>
<h1 style=”border:solid Tomato;”>titolo con bordi</h1>
</body>
</html>

6. Carattere e dimensione del testo

Per definire il carattere del testo si utilizza la proprietà font-family dell’ attributo style.

<html>
<body>
<h1 style=”font-family:verdana;”>Titolo con carattere Verdana</h1>
<p style=”font-family:courier;”>Paragrafo con carattere Courier</p>
</body>
</html>

Per definire la dimensione del testo si utilizza la proprietà font-size dell’ attributo style.

<html>
<body>
<h1 style=”font-size:200%;”>testo 1</h1>
<p style=”font-size:80%;”>testo 2</p>
</html>

7. Allineamento del testo

Per definire come deve essere allineato il testo si utilizza la proprietà text-align dell’ attributo style.

<html>
<body>
<h1 style=”text-align:center;”>TITOLO CENTRATO</h1>
<p style=”text-align:right;”>PARAGRAFO UNO</p>
<p style=”text-align:left;”>PARAGRAFO DUE</p>
</body>
</html>