COME SCRIVERE, INSERIRE E UTILIZZARE IL CODICE CSS

Vediamo la sintassi da utilizzare, ricordando che ci sono tre modi di inserire gli attributi con i fogli di stile. Innanzi tutto :

gli attributi vanno inseriti tra parentesi graffe ( { → alt+123 e } → alt+125 )
se devo inserire più attributi, questi vanno separati con il punto e virgola “;” (è consigliabile chiudere anche l'ultimo attributo con il “;”)
quando il nome dell'attributo è formato da più parole, queste sono separate dal simbolo “-” che fa parte integrante del nome
a volte il valore è un numero seguito da una unità di misura, in questo caso non va interposto lo spazio, ma vanno scritti attaccati (es. 11px) mentre sarebbe errato scriverlo staccato (es. 11 px)
un esempio di dichiarazione

questo codice può essere utilizzato in tre modi distinti :

in linea (inline) : quando le dichiarazioni sono riferite a un blocco e non devono interessare altre parti, conviene utilizzare questo metodo. In questo caso gli attributi tradizionali, vengono sostituiti da style che racchiude tutte le dichiarazioni di stile di quel singolo selettore :

esempio.

<p style=”font-size:14pt; font-family:verdana, arial, sans-serif;”> …..testo paragrafo con caratteristiche specificate ….. </p>
incorporato nella pagina, quindi posso definire delle dichiarazioni utilizzate da più blocchi. Per esempio posso definire le caratteristiche dei titoli, sezioni, paragrafi, etc.. Va inserito all'interno del markup <head> ed è racchiuso tra <style> . . . . . . </style>.

esempio.

<head>

.

.

<style type="text/css">

                p {
                text-align: justify; 
                text-indent: 12px;
                }

        </style>
.
.
</head>
questo esempio imposta delle dichiarazioni riferite a tutti i paragrafi. Quando impareremo ad usare le classi, questi comandi saranno ancora più potenti.

File di stile esterno : è un file con estensione .css che contiene le dichiarazioni di tutti i blocchi usati (anche qui posso usare le classi). Questo è il più potente e il più consigliato, permette di cambiare il template delle pagine variando il codice del foglio di stile abbinato. Posso inserire ed utilizzare più fogli di stile, per ognuno inserisco una linea “<link rel”stylesheet” href …....” ed in ognuna metto il nome del template che richiamo. Un esempio di foglio di stile è il seguente :

Prima di addentrarci nel codice, è importante dire che si può destinare il foglio di stile a specifici media. Per ottenere questa scelta aggiungo l'attributo media=”.....”

che assegna l'uso del foglio di stile chiamato, i valori possibili sono :

all = tutti i dispositivi (valore di default se non viene specificato)

screen = usato per visualizzare su schermi

print = usato per stampare la pagina con una stampante

handheld = usato per palmari, tablet, smartphone, etc.

se vengono usati, all'interno del foglio di stile assegnato, si dovrà assegnare ai vari elementi e blocchi delle caratteristiche specifiche per il media.

Se si vuole utilizzare un solo foglio di stile, possiamo dividere le parti del codice mediante @media (tipo di media). L'esempio renderà più chiaro il metodo :

come si può notare posso dare impostazioni diverse, nello stesso file, a blocchi o elementi uguali.