Guida ai CSS

Le classi

Le classi  Se abbiamo optato per un foglio di style, esterno o interno che sia, non è detto che dobbiamo necessariamente ridefinire tutti o alcuni elementi (tags) di Html, anzi, lasciamoli stare così come sono e creiamone di nuovi facendo uso delle classi, un sistema molto più comodo e pratico, ve lo assicuro; visto poi che se ne possono creare quante e quelle che ci pare, così facendo si sfrutteranno al meglio le potenzialità dei CSS (fogli di style).

E' infatti possibile definire con estrema semplicità delle proprie classi di stile, saranno queste ad essere richiamate dall'interno dei vari elementi html. Pensate al fatto che lo stesso elemento potrebbe richiamare quando una classe, quando un'altra, come dire: si ottengono dallo stesso elemento risultati completamente diversi a seconda di quale classe viene ad esso associata.

Esempio: Definiamo una classe, per farlo è sufficiente editare un nome preceduto da un punto, quale nome? Non ha importanza, decidetelo voi, meglio se attinente con l'effetto che dovrà produrre in modo tale da essere ricordato con maggiore facilità quando avremo bisogno di adoperarlo.

Vediamo praticamente come fare, immaginiamo di volere qualcosa che serva per la nostra firma, quella che di solito si mette a fine pagina. Creeremo una classe col nome firma che faccia uso di un font piccolo e di colore rosso in stile italico.

Richiamiamo dal nostro editor il file .css (se si trattava di un foglio esterno), altrimenti portatevi all'interno della zona style, posizionandoci fuori da eventuali parentesi graffe, possiamo descrivere la nostra classe firma, assegnandole i vari attributi:

.firma {
font-family : Verdana,Arial,Helvetica;
      color : #ff0000;
  font-size : 10pt;
 text-align : center;
font-weight : lighter;
 font-style : italic;
       }

da notare che fra il . (punto) iniziale e la scritta firma non ci sono spazi. Vediamo cosa fanno le singole voci inserite in questa nuova classe firma:

color : #ff0000; Colore rosso, si possono esprimere i colori in formato esadecimale, come in questo caso, facendoli precedere dal segno pound # (cancelletto), oppure scrivendo il relativo nome del colore in lingua inglese. Anche red avrebbe prodotto lo stesso risultato.

font-size : 10pt; Dimensioni del font: 10 punti, potevamo esprimere il valore anche in pixel o in centimetri o anche in altri modi che vedremo in seguito. In pixel forse è addirittura meglio che in punti perchè si adatterà perfettamente alla risoluzione video qualunque essa sia. Da notare che non ci sono limiti alle dimensioni come accadeva per il font max 7 di html.

text-align : center; Allineamento del testo, in questo caso centrato, si poteva scegliere fra destro, sinistro o giustificato; adoperando i relativi termini in lingua inglese: left, right, justify.

font-weight : lighter; Consistenza del font, lighter; leggera, potevamo adoperare: normal, bolder, bold o anche numeri: 400, 500 ecc. ecc.