Gli stili e i tag CSS

Lo stile è una formattazione grafica del testo (dare un font, un colore, una dimensione ai testi).

Guardiamo questo codice HTML e notiamo che vengono dati due stili differenti, uno al tag <h1> ed uno al <h2> .

<h1><font face="Arial" color="red">Tutorials</font></h1>
<h2><font face="Arial" color="red">CSS</h2>
<h2><font face="Arial" color="red">CSS</h2>

Bene, abbiamo attribuito lo stile con l'HTML e non con il CSS!
Visto che siamo furbi, però, e sappiamo che dovremo scrivere molte altre volte i tag <h1> e <h2> convertiremo quel codice in questo modo!

<style type="text/css">
h1, h2 {
font-family: Arial;
color: red;
}
</style>

Se dovremo, infatti, citare più volte i tag <h1> e <h2>, ci sarà estremamente più comodo scrivere lo stile una volta per tutte che non ripeterlo continuamente.

<font-family>: definisce la famiglia dei font di appartenenza. È bene specificare sempre più di un font (e mettere per primo quello che vorreste vedere voi) perché non tutti i sistemi operativi hanno il set di font di Windows (che è il più comune)e soprattutto NON usate MAI font che avete scaricato sul vostro pc ma che non si annoverano tra quelli di default.
Correreste il rischio di essere gli unici a vedere il sito in una maniera, rendendolo incomprensibile a tutti gli altri.
Le famiglie di font più comuni sono:

• Verdana, Geneva, Arial Helvetica, sans-serif
• Georgia, "Times New Roman", Times, serif
• Courier New, Courier, mono
• Arial, Helvetica, sans-serif
• "Times New Roman", serif

Ricordate di scrivere correttamente i nomi del font e di porli tra virgolette (come ho fatto io sopra) se il nome del font è composto da più parole (Times New Roman infatti è tra virgolette).
Importante, per la resa ottimale del vostro sito, è non interscambiare le classi tra loro.
Noi abbiamo accostato spesso l'Arial al sans-serif ma se avessimo accostanto il Times New Roman al Courier New cosa sarebbe accaduto? Probabilmente nulla, dipende dal vostro layout.
I font sono accorpati nelle famiglie a quel modo per ragioni tipografiche e quindi quante righe utilizzano nella formattazione.
Se il vostro sito non ha ampi spazi, potreste rischiare di far sballare un po' di cose, fondendo insieme più famiglie.

I Tag che abbiamo visto prima (h1 e h2) sono tra i più importanti, ma esistono anche altri tag HTML che ci possono aiutare nel nostro stile.

<style type="text/css">
body, p, td, th, div, blockquote, dl, ul, ol {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
</style>

Ovviamente è meglio non unire molti tag insieme nello stesso stile o si finisce per creare una formattazione troppouniforme ed uguale.
In questo caso abbiamo attribuito un colore nero al testo (color: #000000), un font grande 1 em (font-size: 1em) attribuito alla famiglia del Verdana (font-family: Verdana, Arial, Helvetica, sans-serif).
La sintassi del CSS prevede prima di tutto il nome del tag cui si vuole riferire uno stile (body), l'apertura di una parentesi graffa { e le varie attribuzioni le quali DOVRANNO finire con un punto e virgola ; o finireste per non visualizzare proprio nulla!
Per ora ci interessano altri selettori :

• a:link
• a:visited
• a:hover
• a:active

Il primo ci permette di dare lo stile ad un link normale, il secondo di dare lo stile ad un link che è stato già cliccato una volta dall'utente, il terzo ci permette di dare lo stile ad un link nel momento in cui l'utente ci passa sopra il mouse e l'ultimo di dare lo stile ad un link 'nel momento in cui sta per essere cliccato'.
In genere vengono aggruppati a coppie, i primi due e gli ultimi due.
Basta ricordarsi di seguire sempre l'ordine corretto tramite una simpatica formula: LoVe e HAte (le maiuscole fanno riferimento a Link, Visited, Hover e Active).
Per vedere meglio queste proprietà passate passiamo pure al prossimo tutorial!