Sintassi CSS

Fatte le dovute scelte su dove implementare codice CSS per una o per più pagine, ovviamente consiglio un'analisi stilistica prima di iniziare a scrivere codice, passiamo alla fase successiva, come utilizzare correttamente la sintassi CSS per tutti e tre i casi esposti nella lezione precedente.

Esaminiamo questo codice Html (che si presume si capisca al volo) e mettiamolo a confronto con l'equivalente codice CSS:

<div><font color="#FF0000">
Questo testo apparirà in rosso
</font></div>

vediamo ora come ottenere lo stesso risultato con i CSS:

<div style="color: #FF0000;">
Questo testo apparirà in rosso
</div>

La sintassi CSS differisce in verità non tantissimo da quella Html, possiamo notare due cose, non si utilizza come operatore di assegnazione il carattere = (uguale) ma il carattere : (due punti); ogni comando viene sempre chiuso col carattere ; (punto e virgola), questo per permettere di separare un'istruzione dall'altra, per questo nell'ultima istruzione di un blocco può essere omesso il punto e virgola, ma le buone norme di programmazione consigliano di utilizzarlo comunque.

Vediamo come implementare un blocco di stile esterno al Tag, sia che si trovi all'interno dell'header della pagina, sia che faccia parte di un file esterno:

div {
   text-align: Center;
   color: #FF0000;
   font-size: 12px;
   font-family: Verdana;
   font-weight: Bold;
}

Questo metodo di indentatura del codice favorirà sicuramente la chiarezza e la leggibilità, permettendo un eventuale intervento successivo in maniera più agevole.

Nota: precedentemente ho fatto riferimento agli operatori di assegnazione, per chi non sapesse di cose si tratta, nella terminologia tecnica sia matematica che di programmazione, si intende per operatore di assegnazione un carattere utilizzato per assegnare il valore sulla destra all'attributo o proprietà sulla sinistra.

Commentare il codice

Sfrutto questa lezione dedita alle definizioni sintattiche per parlare di un elemento importante utilizzato per quando si scrive codice, che si tratti di codice di programmazione o di markup.

Per chi non lo sapesse, un commento è una riga, o una serie di righe che, in virtù di una serie di caratteri speciali, non vengono interpretate come codice o come testo, ma servono unicamente allo sviluppatore per rendere più chiaro e leggibile il codice ad una seconda lettura.

La sintassi CSS utilizza la stessa simbologia del Javascript per definire un commento, sia che sia su di una sola riga o su più righe, l'apertura è rappresentata dai caratteri /* e la chiusura dai caratteri */.

Vediamo lo stesso esempio riportato in questa lezione implementato con opportuni commenti, il che servirà a farsi un'idea preliminare della funzionalità dei codici CSS:

div {
   /* Centra il testo rispetto alla pagina */
      text-align: Center;
   /* Imposta il colore del testo */
      color: #FF0000;
   /* Imposta le dimensioni del testo */
      font-size: 12px;
   /* Imposta il carattere del testo */
      font-family: Verdana;
   /* Evidenzia il testo col grassetto */
      font-weight: Bold;
}

Questo testo è il risultato della stilizzazione utilizzata nell'esempio.

Software di sviluppo

Per sviluppare codice CSS è più che sufficiente un qualsiasi editor di testo come il Notepad, ma agli amanti dei software dedicati consiglio vivamente TopStyle Lite della BradSoft.

Autore: Luca Ruggiero