In questo capitolo indicheremo risorse e link utili per chi voglia approfondire l’argomento.

Innanzitutto una visita al sito del W3C dove son indicate le specifiche è d’obbligo per tutti. Per chi avessi problemi con l’inglese è disponibile una traduzione in italiano.

Un altro indirizzo da avere sottomano è w3schools.com, in particolare la sezione css dove troverete notizie, consigli ed esempi per ogni regola.

Per controllare la bontà del nostro lavoro è utile utilizzare un validatore. Il migliore è probabilmente ed ovviamente quello del W3C.

Un’ottima risorsa in italiano è sicuramente constile.org dove son presenti tutorial, esempi, consigli e suggerimenti sui fogli di stile.

Nei segnalibri di un coder css non dovrebbero mancar inoltre: http://www.alistapart.com/  e http://glish.com/css/ due ottime risorse in inglese.

Esistono poi tool semi-automatici per creare liste e form ed una raccolta di layout divisi per numero di colonne e tipo layout (fisso o liquido).

Infine son sicuramente da visitare CSS Zen Garden e CSS Zen Sentiero che mostrano come i fogli di stile non siano un limite per gli artisti del web design, tutt’altro!

I css permettono design tableless, cioè senza tabelle, che ritornano finalmente ad assumere il valore per le quali son state progettate: mostrare dati tabellari, statistici. Anche per le tabelle esistono specifiche proprietà CSS:

table-layout:

table-layout: auto | fixed

che permette alle tabelle, alle righe o alle colonne delle stesse, di adattarsi al contenuto o di restare fisse in base, in altezza o larghezza a ciò che si è indicato.

empty-cells:

empty-cells: show | hide

per scegliere se mostrare o meno le celle vuote.

border-collapse:

border-collapse: collapse | separate

indica se far collassare i bordi in un unico bordo o separarli in più livelli.

border-spacing:

border-spacing: <lunghezza> <lunghezza>

da usare ovviamente con border-collapse:separate per indicare lo spazio tra i bordi. Si possono specificare due valori: 1 per la spaziatura destra e sinistra ed il secondo per quella in alto e basso; se si indica un solo valore vale per tutti e 4 i bordi. 

caption-side:

caption-size: top | right | bottom | left

per indicare in che lato mostrare il valore di caption della tabella.

La stampa di pagine web presenta spesso delle difficoltà. Sovente il web master si preoccupa dell’impaginazione a schermo, magari utilizzando layout liquidi dimenticando che la stampa ha caratteristiche diverse. Come ovviare al problema? Tempo fa era d’uso creare pagine apposite per la stampa, generandole lato server e togliendo gli elementi di navigazione (menu, header e footer, tipicamente).

Lo stesso, e molto di più può esser fatto via CSS: vediamo passo passo come fare:

Nascondere blocchi ed elementi alla stampa.

Studiamo la pagina e segnamoci quali sono i blocchi e gli elementi grafici da nascondere alla stampante. Creiamo un nuovo file css ed impostiamo ad essi la proprietà display:none;

Impostare le dimensioni in misure assolute

Diamo larghezza automatica al blocco da stampare, impostiamo la grandezza dei caratteri possibilmente in punti, 12 potrebbe essere una buona soluzione, ricordiamoci che molti stampano in bianco e nero, quindi se necessario cambiamo i colori ai blocchi.

Prestare attenzione agli elementi flottanti ed agli sfondi

Le stampe son spesso impostate automaticamente, e giustamente, sul non stampare le immagini di sfondo. Se usiamo elementi che vorremmo mostrare con immagini in sottofondo o se usiamo tecniche di image replacement, teniamolo presente e riscriviamo le regole nel css di stampa. Attenzione inoltre agli elementi flottanti o con posizione assoluta che potrebbero dar problemi di posizionamento. Sovrascriviamo tali regole con altre che permettano la loro collocazione nel normale flusso di informazioni

Aggiungere l’url dei link (opz.)

I collegamenti a stampa ovviamente non possono esser seguiti però potrebbe esser necessario indicare dove puntano tali collegamenti. I css permettono di mostrare il contenuto dell’attributo href usando tale codice:

a:link:after {
  content:  " [" attr(href) "]";
}

che ha però due controindicazioni: alcuni browser la ignorano, e se vi viene in mente IE6 non sbagliate di certo, e soprattutto se l’href è un collegamento relativo sarà stampato in questa forma e non in forma assoluta. Detto più semplicemente se linkate pagine con la forma "/index.html" troverete stampato tale valore. Come ovviare? Beh, non usare collegamenti relativi sarebbe la soluzione ideale oppure usando un trick

a[href=^="/"]:after {
   content: " [http://www.sito.com" attr(href) "] ";
}

che sta per: se l’href inizia per / stampa il http://www.sito.com prima del valore dell’attributo.

Collegare il css per la stampa alle pagine

Una volta scritte tutte le regole è necessario associare il file css creato per la stampa alle pagine xHTML:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

attenzione alle altre regole scritte per gli altri media: potreste avere delle sorprese: se associamo un css senza specificare il media o impostandolo a tutti queste regole saranno applicate anche alla stampa. Per non incorrere in rappresentazioni non volute una buona soluzione è associare le regole per il video utilizzando l’@import. Cioè:

<style type="text/css" media="all">@import "generale.css";</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Bene. Ora dovreste avere delle pagine perfette per la stampa. Ma i css ci permettono di più: ci danno la possibilità di controllare il flusso di stampa e, volendo, forzare la stampa di un blocco all’inizio della pagina successiva. A tale scopo ci vengono incontro le regole:

page-break-after: auto | always | avoid | left | right | inherit;

page-break-before: auto | always | avoid | left | right | inherit;

page-break-inside: always | auto | inherit;

che forzano o impediscono l’interruzione della stampa nella pagin del blocco considerato, rispettivament dopo (after) prima (before) o dentro (inside).

I valori indicano:

• auto: non forza né impedisce l’interruzione
• always: forza sempre l’interruzione di pagina
• avoid: evita sempre l’interruzione
• left: forza una (o due) interruzione di pagina in modo che la pagina successiva sia stampata come una pagina sinistra
• right: forza una (o due) interruzione di pagina in modo che la pagina successiva sia stampata come una pagina destra
• inherit: eredita la stessa proprietà dal blocco genitore.

I vantaggi dell’uso dei CSS viene resa evidente dalle proprietà dei testi, proprietà che permettono il controllo tipografico accurato, semplice per tutti ma allo stesso tempo potente. Con i css infatti è possibile controllare qualunque aspetto tipografico permettendo una resa avanzata dei testi usando le seguenti proprietà:

text-align:

text-align: left | center | right | justify

Esempi:

{text-align:justify;}

Permette di allineare il testo rispettivamente a sinistra, centrato, a destra e giustificato. 

text-decoration:

text-decoration: none | underline | overline | line-through | blink

Esempi:

a {text-decoration:underline;}
a:visited {text-decoration:line-through;}
a:hover {text-decoration:none;}

per stampare il testo: senza nessuna decorazione, sottolineato, sopralineato, barrato e lampeggiante. L’uso di blink è da evitare poiché potrebbe creare problemi fisici ad alcuni e perché, obiettivamente, è fastidioso non poco.

text-transform:

text-transform: none | uppercase | lowercase | capitalize

permette di trasformare il testo in: tutto maiuscolo (uppercase), tutto minuscolo (lowercase), ogni prima lettera in maiuscolo (capitalize) o lasciare il testo formattato come da xHTML.

line-height:

line-height: normal | <valore> | <valore percentuale>

Esempi:

{line-height: 20px;}
{line-height: 200%;}

per impostare l’interlinea del testo.

word-spacing:

word-spacing: normal | <lunghezza>

permette di aumentare o diminuire lo spazio tra le parole. Di default ha valore 0. Impostando un valore positivo tale lunghezza si aggiunge alla distanza solita, impostandone uno negativo si dimuisce.  Attenzione:

{word-spacing:10px;}

imposta una distanza tra le parole di 10px PIU’ il valore standard, non 10px in assoluto.

letter-spacing:

letter-spacing: normal | <lunghezza>

Come sopra. Di default ha valore 0 che sta ad indicare lo spazio tra le lettere standard. Anche in questo caso la lunghezza indicata va a sottrarsi o ad aggiungersi al valore di default.

text-indent:

text-indent: <lunghezza> | <percentuale>

Permette di stabilire il rientro del capoverso di un paragrafo o di un qualunque blocco di testo.

vertical-align:

vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | <valore> | <percentuale>

Inziamo subito a dire cosa NON è: non corrisponde al valign delle tabelle SE non usato nelle tabelle. Non allinea al centro di un blocco un’immagine, tanto per esser chiari, ma indica l’allineamento verticale di un elemento online rispetto ai contigui. Per esser chiari, fa ciò che si fa con gli apici o pedici.

I possibili valori accettati sono:

• baseline (allinea l’elemento alla linea base dell’elemento contiguo)
• bottom (l’elemento viene allineato con il più basso degli elementi della linea)
• middle (l’elemento viene piazzato al centro dell’elemento contenitore)
• sub (pedice)
• super (apice)
• text-bottom (l’elemento viene allineato con la parte bassa della linea di testo)
• text-top (l’elemento viene allineato con la parte alta della linea di testo)
• top (l’elemento viene allineato con il più alto degli elementi della linea)
• valore (il tal caso viene allineato secondo il valore indicato. accetta anche valori negativi)
• percentuale (allinea l’elemento di un x% rispetto al valore del line-height dichiarato.)

Esempi:

{vertical-align:middle;}

Approfondimento: Allineamento verticale con i CSS.

white-space:

{white-space: normal | pre | nowrap}

Se nel testo xhtml si inseriscono più spazi successivi, o anche ritorni a capo, questi saranno ignorati e verrà mostrato a schermo un solo spazio. Con tale proprietà si modifica tale comporamento. Con normal due o più spazi o ritorni capo vengono mostrati in un unico carattere di spazio, no-wrap fa sì che il ritorno a capo del testo si ripercuota nella pagina mostrata, mentre più spazi successivi vengono stampati come un unico spazio, con pre si imposta il ritorno a capo e gli spazi così come scritti nel codice.

Uno dei problemi a cui vanno incontri i neofiti che provano i css è l’allineamento verticale di un blocco, un’immagine, rispetto ad un blocco contenitore. Un qualcosa tipo valign="middle" delle tabelle.

Molti iniziano provando la proprietà vertical-align:middle.

Ovviamente non ottengono il risultato sperato. Perché? Poiché, come spiegato nel capitolo riguardante le proprietà dei testi, tale proprietà serve ad allineare più elementi inline successivi. Qui troverete degli esempi che valgono più di mille parole (o almeno spero… 🙂 ).

Come fare allora per poter centrare un blocco di testo, un’immagine dentro un blocco? Abbiamo in effetti varie possibilità.

Consideriamo il primo caso: un menu con un’immagine di sfondo ed il testo su un’unica riga.
Qui vedete l’esempio: noterete nell’ultimo caso l’inserimento della proprietà "line-height:30px;", cioè l’altezza dell’immagine di sfondo. In tal modo si forza l’interlinea alla grandezza dello sfondo, centrando automaticamente il testo all’etichetta.
Attenzione: tale tecnica ha una controindicazione. Se il testo occupa più linee, lo stesso scenderà in basso, con effetti assolutamente non voluti. Noterete tale problema ingrandendo il testo dell’esempio (con firefox » control [+] ).

Se volessimo invece centrare verticalmente un box dentro un altro box o alla pagina si può ricorrere al posizionamento assoluto degli stessi.
Un ottimo articolo per tale scopo è presente su constile.org.

Ok. Fin qui nulla di che. Come avrete notato, i css non hanno nulla di trascendentale ed il loro uso è sufficientemente semplice. A questo punto potrebbero sorgerci domande quali:

• Che programma usare per scrivere il codice dei CSS?
• Come scriverli e possibilmente ottimizzarli?
• Come verificare la corretta visualizzazione su browser diversi?

Alla prima domanda non posso che dare una risposta molto soggettiva. Io personalmente utilizzo notepad++ scrivendo tutto il codice a mano, cosa che tra l’altro faccio anche con l’html ed il php, non perché sia un talebano del codice ma per una questione di velocità di scrittura e di controllo accurato dello stesso. Ovviamente sfrutto alcune caratteristiche del programma imprenscindibili: colorazione del codice, funzioni di undo e redo a più livelli, sostituzione su tutto il documento anche attraverso l’uso di espressioni regolari per dirne alcune.

Cosa consiglio? Qualunque text-editor: pico, nano, vim, dreamweaver, notepad++, quanta, phpedit e così via. Provateli, cercate quello che vi sembra più comodo, ergonomico, usabile e poi continuate ad usare solo quello. Per la visualizzazione basta un semplice F5 sul browser. Non è indispensabile che il vostro editore abbia preview integrate.
Esistono infine programmi che vi permettono di creare i css in forma visuale senza conoscere tutte le proprietà: tra i tanti a me piace SimpleCSS. Può esser comodo per chi è alle prime armi per imparare a memoria i valori e le proprietà, a condizione che una volta superata la prima fase, si passi ad un vero editore di testi.

Il tutto ovviamente IMHO, ovvero, per me, secondo me.

Anche il secondo punto sfiora le preferenze personali. Posso in generale dare alcuni consigli su come opero io. Non è detto che sia il metodo migliore, anzi.
Secondo alcune scuole di pensiero i css dovrebbero occupare il minor spazio possibile, cercando quindi di accumulare le regole per quanto possibile.  Io, soprattutto per siti con CSS abbastanza impegnativi tento di solito a dividerli in più parti, scrivendone uno generale, uno solo per la stampa, se ci sono sezioni sufficientemente distanti come stile grafico, uno per sezione ed a volte uno per alcuni browser (NN4 e IE5 nello specifico) quando richiesto dal committente o dal target del sito.
Cerco poi di NON scrivere le regole selettore per selettore, una cosa tipo h1 { margin:1em 1em; font-size:1.7em; border-bottom:1px solid gray; } ma di suddiverli nel css, o se molto corposi in più css, a seconda di ciò che dichiarano: colori, bordi, box-model, testo. Può sembrare un lavoro inutile ma vi assicuro che è molto comodo quando poi torniamo a manutere il sito avere tutte le proprietà sotto mano e sott’occhio e non andare di Ctrl-F a cercarlo nel testo di un documento di 500 righe.

Infine, e ve ne accorgerete presto…, avvertirete la necessità di controllare la resa di quanto scritto su molti browser diversi, quali, ma non solo: IE5.01 e successivi, Opera 7 e successivi (se non dalla 5 🙂 ), Firefox, Netscape, Safari, Konqueror, Galeon e chi ne ha ne metta. Molto dipende dal Sistema Operativo che utlizzate: l’ideale sarebbe di avere varie postazioni con sistemi operativi diversi e più computer. Ok ok, spesso è fantascienza. Come fare allora?
Su piattaforma windows non dovreste aver problemi con Firefox, qualsiasi versione, Opera e Safari che possono coesistere anche in più versioni e più piattaforme.
Qualche problema in più ce lo da Internet Explorer che sovrascrive la precedente installazione. Fortunatamente esistono hack per avere più versioni di IE sullo stesso PC. Approfondimenti.

Per Mac, Intel in particolare, esiste Parallels che permette di avere due Windows e Mac sulla stessa sessione di lavoro. Con lo stesso principio lavora WmWare: permette di avere più macchine virtuali sullo stesso dispositivo, con la possibilità quindi, di avere windows e linux sulla stessa macchina. Per i Linari puri e duri esiste infine la possibilità di utilizzare IEs4Linux.

Infine esistono servizi web che ci danno l’anteprima su vari browser, semplicemente, indicandogli la pagina da controllare ed i browser che ci interessano; addirittura alcuni ci permettono di scegliere se mostrare il rendering con flash, javascript e java disabilitati o meno. Ottimo in tal senso è Browsershots.

Segnalo infine evolt un sito che raccoglie moltissime versioni di browser, utile ad esempio, a chi non ha sottomano NN4 e non sa dove andarlo a cercare.

Classi ed ID sono due attributi del codice xHTML, importantissimi per i fogli di stile.
Permettono infatti di associare un’insieme di regole ad un solo selettore (ID) o ad un gruppo (class).

Immaginiamo di voler assegnare a tutti i commenti di un blog il colore grigio ed una grandezza di 10px. Senza l’esistenza di questi due particolari selettori non riusciremmo a farlo con i css, dovremmo usare il tag font (orrore!!!).

Con i CSS ci basta assegnare una classe ai commenti, chiamandola ad esempio "commenti" e dichiare tali proprietà nel css in questo semplice modo:

xHTML: [….]
  <p class="commenti">Primo commento</p>
  <p class="commenti">Secondo commento</p>

e così via

CSS:
  .commenti {color:gray: font-size:10px;}

Notate il puntino (.) prima del nome della classe: serve ad esplicitare che le regole inserite saranno riferite a tutti gli elementi con quella classe esplicita.
E’ importante far notare che la classe così definita si applicherà a qualsiasi elemento della pagina con attributo class="commenti".

Scrivendo quindi questo codice xHTML

<p class="commenti">Commento</p> Bla bla <div class="commenti">Blocco di testo</div>

Anche il contenuto del div sarà stampato con le stesse proprietà stabilite per i commenti. Questo può esser voluto o meno: in tal caso basterebbe assegnare nel css:

p.commenti {proprietà:valori}

affinché le regole della classe commenti vengano applicate solo ai paragrafi (<p>).

Una sorta di classe particolare è l’ID, che si differenzia di base dalla classe per il fatto che è applicabile SOLO ad un elemento è l’ID. In pratica può essere applicato UNIVOCAMENTE ad un solo elemento.

Per definirlo nell’xHTML

<p id="id-numero1">Testo </p>

e nel css

#id-numero1 {proprietà:valore;}

Stesse norme per le classi, con la differenza di dover anteporre in questo caso il cancelletto (#) al posto del punto.

Siamo arrivati al punto di dover applicare delle regole alle nostre pagine. Come si fa a dire attraverso i css che il nostro paragrafo deve contenere testo di colore rosso? Come facciamo a dire di applicare uno sfondo giallo ed un margine nullo a tutti i titoli h1? Come diciamo al css che tutti i titoli h1 ed h2 devono avere padding nullo?

p { color: red;} nel primo caso,
h1 { background-color: yellow; margin: 0; } nel secondo e
h1, h2 { padding: 0; }  nell’ultimo. Tutto qua!

Vediamo nel dettaglio la prima regola:

  p   { color: red; }

selettore              proprietà           valore

Come avrete notato la regola è divisa in due parti: la prima è il selettore, cioè la parte che indica a quale sezione del documento applicare la regola (o le regole) indicata dal blocco delle dichiarazioni racchiuso tra parentesi graffe.

Il blocco delle dichiarazioni è un insieme di dichiarazioni formato da una proprietà e da un valore da assegnare alla stessa, divisi tra loro da due punti e terminato da un punto e virgola. Regole successive possono evidentemente applicate come nel caso del titolo h1 del secondo esempio.

E’ possibile associare le stesse regole a più selettori come indicato nel terzo esempio ed applicare regole diverse a seconda della disposizione degli elementi nella pagina, argomento che potrete approfondire nella pagina I selettori.

Un caso particolare di regola è riferita a tutte quelle proprietà, quali ad esempio margin, padding, border, che potrebbero avere valori diversi nei quattro lati.
E’ possibile quindi associare valori variabili ai bordi destro, sinistro, superiore ed inferiore con questa sintassi:

p {
    margin-top: 0;
    margin-right: 2px;
    margin-bottom: 3px;
    margin-left: 5px;
}

La cosa interessante è che in tali situazioni è possibile applicare una regola comune e *risparmiare* codice con la c.d. sintassi abbreviata in tal modo:

p {
    margin: 0 2px 3px 5px;
}

con i valori per, rispettivamente, il lato alto, destro, basso e sinistro (in senso orario partendo dall’alto per capirci  )

E’ possibile associare una regola solo per i lati alto e basso ed una per destro e sinistro:

p {
    margin: 5px 0;
}

con il primo valore riferito ai lati orizzontali ed il secondo per quelli verticali.

Se si indicano infine solo tre valori,

p {
    margin: 3px 10px 2px;
}

essi saranno riferiti rispettivamente al lato superiore, al lato destro e sinistro ed al lato inferiore; in pratica è equivalente a scrivere: p {margin: 3px 10px 2px 10px;}.

Abbiamo già visto nell’articolo dedicato alle regole dei css cosa siano i selettori: un oggetto a cui è possibile associare valori e proprietà.

Esistono vari tipi di selettori:

• Selettore Universale (Universal Selector)
• Selettore di Elementi (Type Selectors)
• Selettori Discendenti (Descendant Selectors)
• Selettore Figlio (Child Selectors)
• Pseudo-classe :first-child (The :first-child pseudo-class)
• Pseudo-classi dei links (The link pseudo-class)
• Selettori Adiacenti (Adjacent Selectors)
• Selettori di Attributi (Attribute Selectors)
• Selettori di Classi (Class Selectors)
• Selettori di ID (ID Selectors)
• Pseudo-classi :first-line e :first:letter (The :first-line e :first:letter pseudo-class)

Selettore Universale *

Permette di associare a tutti gli elementi della pagina delle regole.
Es:

* {color:black; margin:0; }

Associa a qualsiasi elemento della pagina il colore nero e margine nullo.

Selettore di Elementi

E’ il più diffuso. Permette di associare regole ad uno o più elementi:

h1 { font-style: Georgia, serif; }
h2 { font-style: Georgia, serif; }
h3 { font-style: Georgia, serif; }
h4 { font-style: Georgia, serif; }
h5 { font-style: Georgia, serif; }
h6 { font-style: Georgia, serif; }

C’è la possibilità di associare l’insieme di regole a più elementi separandoli con una virgola:

h1, h2, h3, h4, h5, h6 { font-style: Georgia, serif; }

scrittura equivalente alla precedente.

Selettori Discendenti

Questa opzione ci permette di associare regole a particolari elementi se e solo se contenuti in altri elementi definiti:

div strong { color: red; }

Associa il colore rosso solo agli elementi strong contenuti in div.

<body>
 <strong>Questo non sarà rosso in quanto non contenuto in un un div</strong>
 <div>Il testo successivo, <strong>questo in particolare</strong> sarà mostrato in rosso</div>
 <div>Anche <p><strong>questo testo</strong></p> sarà mostrato in rosso; non è importante che i due elementi siano adiacenti o figli.</div>
</body>

Selettore Figlio

Potrebbe essere una buona soluzione a molti problemi, purtroppo non è supportato, così come il selettore adiacente, da Internet Explorer. Secondo le specifiche permette di associare regole ad elementi solo se contenuti da un altro indicato nel selettore e da nessun altro. 

div > strong { color: red; }

Es:

<body>
  <div>Il testo successivo, <strong>questo in particolare</strong> sarà mostrato in rosso</div>
 <div>Anche <p><strong>questo testo</strong></p> NON sarà mostrato in rosso in quanto tra div e strong c’è un altro elemento, mentre <strong>questo testo</strong> vicecersa lo sarà.</div>
</body>

Pseudo-classe :first-child

Molto simile al selettore figlio, solo che tale regola vale SOLO per il primo figlio, indipendentemente dalla distanza cui è posto dall’altro.
Es:

div > strong:first-child { color: red; }

Pseudo-classi dei links

E’ probabilmente una delle feature più interessanti dei Css: permette di associare ai links (ed anche agli altri elementi, tranne :link e :visited, in teoria; in pratica visto il non supporto di IE solo all’elemento A) regole diverse a seconda se il link non è stato visitato (:link), già seguito (:visited), attivo (:active), al passaggio del mouse (:hover) e se selezionato (:focus).
Es:

a:link { color: blue; }
a:visited { color: purple; }
a:active { color: black; }
a:hover { color: red; }
a:focus { color: green; }

Selettori Adiacenti

Ha la stessa limitazione dei selettori figli: non è supportato da Internet Explorer. Secondo le specifiche permette di associare regole ad elemento solo se contenuto subito dopo l’altro indicato. 

div + strong { color: red; }

Es:

<div>
  <strong>Questo testo sarà mostrato in rosso</strong> mentre
 </div>

<div>
  il prossimo <strong>testo</strong></p> no, in quanto non immediatamente vicino all’elemento div
</div>

Selettori di Attributi

Selettore davvero interessante per i possibili sviluppi verso l’XML ma purtroppo di poca utilità visto che pochissimi browser attualmente non lo supportano. Permette di associare regole diverse all’elemento se dotato di attributi o valori degli stessi.

H1[title] { color: red; }
H1[title="pippo"] { color: green; }

La prima regola associa il colore rosso a tutti gli elementi h1 dotati di title, mentre la seconda regola varrà solo per gli elementi h1 il cui titolo è esattamente pippo. Potrebbe essere molto utile per assegnare valori diversi agli elementi input di un form, per variare lo stile del pulsante submit rispetto ad un campo testo ad esempio; purtroppo ad oggi è conveniente per la stessa operazione assegnare delle classi diverse ai tag.

Selettori di Classi

Permette di assegnare regole a qualunque elemento a cui abbiamo assegnato una classe:

*.nomeclasse { color: red;} o, in forma equivalente
.nomeclasse { color: red;}

E’ possibile ovviamente assegnare regole solo ad uno o più elementi con classe nomeclasse, usando la sintassi:

strong.nomeclasse  {color: purple; }

Selettori di ID

Selettore molto simile al precedente con l’ovvia differenza che le regole saranno assegnate solo ad un particolare ID:

#nomeclasse  {color: purple; }

Pseudo-classi :first-line e :first:letter

Opzione molto interessante che limita le regole rispettivamente alla prima linea del testo nel primo caso ed alla prima lettera nel secondo per effetti simili a quelli tipografici. Es:

p:first-line { text-transform: uppercase; }
p:first-letter { font-size: 300%; color:red; }

trasforma la prima riga dei paragrafi (p) in maiuscoalo e rende la prima lettera degli stessi 3 volte più grande e di colore rosso.

Avvicinandoci ai css questo sarà uno dei concetti più di tutti ci assilleranno. Cosa si intende per box-model?

Immaginiamo la pagina come una pagina tipografica per iniziare (esempio: un quotidiano). In esso ogni elemento presente può esser raffigurato come una scatola, ognuna delle quali può contenerne altre. Con i css dobbiamo ragionare nello stesso modo. Ogni pagina html è formata da un box principale, dentro il quale son presenti il box <body> riempito a sua volta di altre elementi.

Questi possono esser di due tipi: block-level (blocchi) o inline.

Qual è la differenza? Semplice:

• un elemento block level si posiziona sotto il blocco precedente, quello inline a fianco;
• un blocco occupa in larghezza tutto lo spazio dell’elemento che lo contiene, l’inline solo quello effettivo del suo contenuto;
• un blocco può contenere altri blocchi ed elementi inline, l’inline solo altri inline;
• un blocco possiede delle dimensioni configurabili tramite proprietà quali height e width, un inline no.

Elementi tipicamente block-level sono: ul, ol, form, p (anche se questo fa eccezione in quanto no può contenere altri blocchi al suo interno) e div, il blocco generico.
Elementi inline sono: a, em, strong, b e span, elemento inline generico.
Elenco approfondito degli elementi [in inglese].
C’è da notare che è possibile modificare tale proprietà con il comando display; display: block, rende esplicito un elemento come block-level, display:inline fa il contrario.

Una particolare proprietà dei CSS è float: cioè, letteralmente *galleggiamento*. Tale proprietà permette di disporre del testo attorno all’elemento. 
L’esempio successivo spiegherà meglio di mille parole il concetto:

Notate che mentre l’immagine rossa sarà seguita da una linea di testo, con la proprietà "float:left;" ordiniamo al testo di circondare l’immagine.
La proprietà clear invece permette di stabilire se un blocco debba esser circondato da testo. Praticamente permette di ripristinare l’allineamento a seguito dell’uso di float.
Float: può assumere valori ( right | left | none)  mentre clear può avere valori  ( right | left | both | none ).

Un aspetto fondamentale da capire il prima possibile è la conformazione di un blocco. Approfitteremo dell’immagine presente sul sito del W3C:

Notiamo che ogni blocco è formato da 4 sezioni concatenate:

• Contenuto
• Padding
• Bordo
• Margin

Il padding è ciò che c’è tra il bordo del blocco ed il contenuto.
Il margine è ciò che c’è tra i vari blocchi.

Impostando la larghezza (widht) attraverso i css si imposta la dimensione AL SOLO contenuto. 

Quindi un blocco con width: 400px, padding: 50px; border: 10px; margin: 30px occuperà uno spazio totale di 490px, non 400 come si potrebbe esser portati a pensare le prime volte. Ovviamente lo stesso discorso vale per l’altezza.

Tutto facile? No. Internet explorer fino alla versione 5 (e se non impostato il doctype anche nella versione 6) considerava ERRONEAMENTE width come la larghezza di contenuto+padding+bordo. Questo ha portato molti errori di interpretazione ed ha costretto molti a trovare una soluzione inventando hack per risolvere il baco.
Uno dei più famosi fu la famosa Regola di Tantek.

Come funziona? Si sfrutta uno dei tanti altri bachi di explorer per fargli fare ciò che vogliamo.
Vediamola in pratica con l’esempio precedente:



div.blocco {
width:460px;  #dimensione per IE5
padding:50px;
border:10px;
margin:30px
voice-family: "\"}\"";
voice-family: inherit;
width:400px;
}
body>div.blocco {
width: 400px;
}

IE 5 interpreterà la dimensione di 460px ed ignorerà tutto ciò che c'è dopo voice-family: "\"}\""; a differenza degli altri browser che leggeranno anche il resto e trovando width:400px riassegneranno la larghezza corretta. Per completezza di informazione, ci son anche browser, quali alcune versioni di Opera, che nonostante interpretino correttamente il box-model non riescono a leggere oltre il comando voice-family: "\"}\""; : a ciò serve la regola successiva body>div.blocco

Ci son altre tecniche da utilizzare: quella che io preferisco è la cosiddetta Simplified Box Model Hack (SBMH):


div.blocco {
width: 400px; \width: 460px; w\idth: 400px;
}

Qual è il principio? La prima dichiarazione, senza escape (width:400px;) verrà letta dai browser quali Opera 5, ad esempio, che non leggono ciò che segue lo slash(\); \width: 460px; sarà letto da tutti, tranne Opera5 appunto e pochi altri e ridifinerà la larghezza del box, w\idth:400px sarà seguita da tutti gli altri browser tranne, appunto, IE 5.
Semplificando: il valore corretto sarà inserito nella prima e terza proprietà; quello per IE 5 nella seconda.

Tale tecnica vale per qualsiasi proprietà, ma, e c'è un ma, secondo le regole w3c uno slash non può precedere le lettere: a, b, c, d, e, f. Quindi potrà esser sfruttata per l'altra proprietà che ci interessa per la definizione del layout, height e non, ad esempio, per font-family, cosa che ci dispiacerà poco in effetti. :)