CREARE SITI WEB in HTML e CSS > CAMBIARE FORMATO CON I FOGLI STILE (CSS)
Un metodo elegante (e professionale) per cambiare formato al contenuto di una pagina web, è quello di usare i "Fogli Stile" i cosidetti CSS (Cascading Style Sheet).
L'uso dei CSS ti aiuta a mantenere distinto e diviso la forma dal contenuto!
Per impostare il formato dei caratteri (e come vedremo in seguito, la forma di una pagina web), tra i tag <head> devi inserire il seguente codice:
<style type="text/css">
<!--
-->
</style>
<!--
-->
</style>
1 - da Visual Studio Code, posiziona il cursore prima del tag finale </head> (nota la differenza con il tag iniziale <head> ! )
2 - digita style e premi invio
3 - completa come da riquadro che vedi sopra
Applicalo alla pagina che hai creato nella lezione precedente (citta-nel-mondo.html); otterrai così il seguente codice:
...
<head>
<title>Le città nel mondo</title>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<h1>Le città nel mondo</h1>
<h2>Europa</h2>
<h3>Italia</h3>
Roma, Milano, Venezia
...
<head>
<title>Le città nel mondo</title>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<h1>Le città nel mondo</h1>
<h2>Europa</h2>
<h3>Italia</h3>
Roma, Milano, Venezia
...
All'interno del codice/dichiarazione digiterai le informazioni che ti consentiranno di personalizzare lo stile dei TAG.
Ad esempio, se vuoi che il testo che si trova all'interno del TAG <h1> abbia
una dimensione di 14 pt - un colore rosso - e sia centrato,
1 - digita il seguente codice:
...
<style type="text/css">
<!--
h1 { font-size: 14pt; color: red; text-align: center; }
-->
</style>
...
<style type="text/css">
<!--
h1 { font-size: 14pt; color: red; text-align: center; }
-->
</style>
...
Tradotto in parole:
- digita il tag (senza segni di maggore e minore) sul quale vuoi impostare il formato (es.: h1)
- digita la la parentesi grafa aperta (premi i tasti ALTGR+MAIUSC+[ oppure ALT+1+2+3)
- digita font-size (imposta la dimensione del testo o font)
- digita i due punti
- digita un valore numerico seguito dal tipo di scala (pt o px o em)
- digita il punto e virgola (per indicare la fine della dichiarazione di stile)
- digita color (imposta il colore del testo)
- digita i due punti
- digita il nome del colore in lingua inglese (red, nell'esempio)
- digita il punto e virgola
- digita tex-align (imposta l'allineamento del testo)
- digita i due punti
- digita il tipo di allineamento (center o left o right)
- digita il punto e virgola
- digita la la parentesi grafa chiusa (premi i tasti ALTGR+MAIUSC+] oppure ALT+1+2+5).
Ti potrebbe interessare anche...
Fare calcoli e creare elenchi con
- Come creare un blog gratis
- Come creare siti web gratis
- Gestisci le tue foto con Picasa
- Naviga veloce con Google Chrome
- Scarica video e musica con Free Studio
Frasi celebri
“Se non lo sai spiegare in modo semplice, non l'hai capito abbastanza bene” (Albert Einstein).