Creare un foglio di stile CSS
Un modo semplice e potente per definire gli aspetti stilistici di una pagina
web è l'uso dei cosiddetti fogli di stile CSS. CSS sta per "Cascading Style Sheets" ed è uno dei principali linguaggi standard del W3C.
Per capire come funzionano e a cosa servono, facciamo un esempio. Immaginiamo
di inserire un semplice paragrafo:
<p>Questo è un paragrafo senza stile</p>
Nel browser esso sarà visualizzato secondo le impostazioni predefinite,
in genere testo nero e sfondo bianco, così:
Questo è un paragrafo senza stile
Immaginiamo, ora, di voler rendere il testo bianco su uno sfondo blue. Per
ottenere il risultato, possiamo affidarci ai fogli di stile:
Questo è un paragrafo
con stile
Come abbiamo fatto? Abbiamo aggiunto al tag <p>
l'attributo style e abbiamo impostato le proprietà per il colore del testo e per lo sfondo, così:
<p style="color: white; background-color: blue;">
Questo è un paragrafo con stile:-)
</p>
Usare questo metodo è però molto scomodo. Se volessi tutti i
paragrafi della pagina con sfondo blue e testo bianco, dovrei aggiungere l'attributo a ciascuno di essi. Ecco perché è preferibile usare altri sistemi.
Si possono, ad esempio, definire gli stili all'interno della testata della pagina, la sezione delimitata dai tag <head>
e </head>:
<html>
<head>
<style type="text/css">
p { color: white; background-color: blue; }
</style>
</head>
<body>
...............
</body>
</html>
Si procede in questo modo. Inseriamo innanzitutto la riga <style type="text/css">: è l'inizio del nostro
foglio di stile. Subito dopo impostiamo lo stile per i paragrafi. Notiamo che
le proprietà vanno racchiuse tra parentesi graffe. Infine, chiudiamo
il tag </style>.
Un altro sistema consiste nello scrivere le regole di stile in un file separato da salvare con l'estensione .css. Il file andrà poi collegato alla nostra pagina in questo modo:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>
...............
</body>
</html>
Per capire quale metodo sia meglio usare, basta porsi alcune domande:
- Gli stili che creo vanno usati per più pagine? Allora userò
un foglio di stile esterno (soluzione 3). - Gli stili che creo vanno usati solo su una pagina? Allora userò un
foglio di stile incorporato (soluzione 2). - Uno stile va applicato su un solo specifico, elemento di una pagina? Allora
userò l'attributo style (soluzione 1).
Impostare le proprietà nei fogli di stile CSS
Con i fogli di stile CSS è possibile intervenire su tutti gli aspetti
stilistici di un elemento. Colore, sfondo, margini, bordi, posizione. La sintassi per definire lo stile di un elemento è molto semplice:
elemento { proprietà: valore; proprietà: valore;
...... }
Ovvero:
p { color: white; background-color: blue; }
Tip: tutte le proprietà dei CSS
Tip: i codici dei colori
Modificare l'aspetto dei titoli con i CSS
Per personalizzare lo stile di un titolo con i CSS, si può procedere
in questo modo. Si crea un nuovo foglio di stile nella testata del documento
e si impostano per ciascun tag le tre principali proprietà, colore, font e dimensioni del testo. Se voglio che i miei titoli h1
siano rossi con font Arial e grandi 20 pixel, farò così:
<html>
<head>
<style type="text/css">
h1 {color: red; font-family: Arial; font-size: 20px; }
</style>
</head>
<body>
...............
</body>
</html>
Il risultato sarà questo:
Titolo h1 personalizzato
Centra un titolo con i CSS
Per posizionare un titolo al centro della pagina è sufficiente usare
la proprietà text-align dei CSS. Se vogliamo che tutti i titoli siano centrati, definiremo la regola in un foglio di stile nella testata della pagina o in uno esterno:
<html>
<head>
<style type="text/css">
h1 {color: red; font-family: Arial; font-size: 20px; text-align: center;}
</style>
</head>
<body>
...............
</body>
</html>
Se invece vogliamo centrare solo un titolo particolare, scriveremo la regola
solo per quello, così:
<h2 style="color: red; font-family: Arial; font-size:
20px; text-align: center;">Titolo</h2>
In entrambi i casi il risultato sarà questo:
Titolo h1 personalizzato
Personalizzare l'aspetto del testo (colore, font, dimensioni)
Ogni browser presenta il testo secondo dimensioni e colori predefiniti, ma
modificabili dall'utente agendo sulle preferenze del programma. Per ottenere
pagine realmente personalizzate e graficamente efficaci, però, è
quasi sempre necessario definire le impostazioni nel codice.
Il linguaggio HTML mette a disposizione un elemento specifico per la gestione
di questa e altre caratteristiche del testo. Si tratta di <font>.
Il suo uso è però decisamente sconsigliato. Il modo migliore per
definire gli aspetti grafici di un qualunque elemento testuale di una pagina
web è l'uso dei fogli di stile CSS.
Questo linguaggio mette a disposizione diverse opzioni e soprattutto consente
di agire con grande precisione su tutti gli elementi della pagina. Vi suggeriamo qui un semplice approccio di base con cui intervenire sulle tre caratteristiche di base: colore, dimensione, font. Le tre proprietà dei CSS che useremo sono: color, font-family,
font-size. Con la prima si definisce il colore del testo, con la seconda il font da utilizzare, con l'ultima le dimensioni.
Prima di passare alla scrittura del foglio di stile, poniamoci qualche domanda:
- Quali tag userò per la mia pagina?
- Ho intenzione di usare titoli? E di che livello?
- Inserirò delle liste?
- Quali colori voglio usare?
Sarebbe opportuno costruire una sorta di specchietto così concepito:
"I titoli h1 saranno rossi, grandi 20 pixel e in Arial. I paragrafi avranno il testo nero in Verdana e di 12 pixel...".
Diciamo di voler inserire titoli h1
e h2, paragrafi e liste non ordinate. Per ciascun elemento scriveremo una regola nel nostro foglio di stile:
<html>
<head>
<style type="text/css">
h1 {color: red; font-family: Arial, sans-serif; font-size: 20px; }
h2 {color: red; font-family: Arial, sans-serif; font-size: 16px; }
p { color: black; font-family: Verdana, sans-serif; font-size: 12px; }
ul { color: black; font-family: Verdana, sans-serif; font-size: 12px; }
</style>
</head>
<body>
...............
</body>
</html>
Una volta definite queste regole, sarà sufficiente inserire il contenuto nel modo opportuno e il testo apparirà formattato secondo i nostri desideri.
