Introduzione

1. 1. Introduzione

   Presentazione della guida

Tecniche di base

1. 2. Reset: controllare i valori di default del browser

   Il punto di inizio di ogni progetto basato sui CSS: eguagliare i valori di default usati dai browser

2. 3. Cos'è la specificità

   Impariamo la regola fondamentale che gestisce il funzionamento dei fogli di stile a cascata

3. 4. Calcolare la specificità

   Metodi pratici per calcolare quale regola prevale in un CSS

4. 5. La keyword !important

   Un modo semplice per dare priorità ad una regola specifica del nostro CSS

5. 6. Classi e/o id

   Capire il funzionamento di due strutture portanti del linguaggio CSS

6. 7. Cambiare il cursore del mouse

   Usare i CSS per modificare l'aspetto del cursore a seconda delle necessità poste dall'interfaccia

7. 8. Nascondere elementi

   Due metodi per non visualizzare specifici elementi su una pagina HTML

8. 9. Fogli di stile per la stampa

   Usare i CSS per adattare il testo della pagina alla carta stampata

Gestione del testo

1. 10. Impostare la dimensione base del testo

   Regole e tecniche per definire una dimensione base consistente per il body della pagina

2. 11. Gestire le famiglie di font

   Creare gruppi di font consistenti e adatti ad ogni sistema

3. 12. Font personalizzati con @font-face

   Usare font anche non presenti sul PC dell'utente

4. 13. Aggiungere ombra al testo

   Usare al meglio la proprietà text-shadow

5. 14. Unità di misura per il testo

   Quale unità scegliere per assegnare una dimensione consistente al testo di un documento

6. 15. Indentare il testo

   Definire un rientro per un'intera porzione di testo o per la sola prima riga

7. 16. Personalizzare l'aspetto dei link

   Come applicare stili differenti ai link presenti in una pagina

8. 17. Centrare il testo all'interno di un box

   Come centrare alla perfezione una porzione di testo sia orizzontalmente sia verticalmente

Uso e gestione delle immagini

1. 18. Sprites CSS

   Tecnica potente e utilissima per gestire animazioni e immagini di sfondo

2. 19. Image Replacement

   Sostituire contenuti testuali con immagini preservando un markup logico e l'accessibilità

3. 20. Testo intorno alle immagini

   Tre semplici soluzioni per gestire al meglio lo scorrimento del testo intorno alle immagini

4. 21. Aggiungere un bordo intorno alle immagini

   Migliorare la presentazione di immagini e foto grazie ad un semplice bordo esterno

5. 22. Rimuovere il bordo blu intorno alle immagini

   Una semplice regola per far scomparire il tradizionale bordo blu sulle immagini usate come link

6. 23. Inserire del testo su un'immagine

   Due tecniche per creare didascalie da abbinare come descrizione alle nostre immagini

Layout

1. 24. Bordi arrotondati con i CSS

   Come arrotondare i bordi di un elemento grazie ai CSS3, con un'alternativa per Internet Explorer

2. 25. Aggiungere un'ombra a un box con box-shadow

   Impariamo ad applicare un'ombreggiatura agli elementi HTML con questa nuova proprietà dei CSS3

3. 26. Sticky footer, posizionare il footer in fondo alla pagina

   Risolvere semplicemente uno dei problemi più comuni nella realizzazione di layout con i CSS

4. 27. Impostare larghezza e altezza (minima e massima) sugli elementi

   Sfruttare al meglio min-width, max-width, min-height e max-height anche su IE6

5. 28. Altezza 100% nei layout

   Come impostare un’altezza dinamica che si adatta al layout della pagina

6. 29. Centrare orizzontalmente e verticalmente un div

   Tre tecniche per ottenere box perfettamente centrati in senso orizzontale e verticale

7. 30. Contenere i float

   Due tecniche per impedire che gli elementi con il float escano fuori dal loro contenitore

8. 31. Visualizzare un elemento inline come blocco e viceversa

   Modificare i valori di default della proprietà display per adattare al meglio i nostri layout

9. 32. Menu fisso in fondo alla pagina

   Realizziamo una barra di menu che rimane sempre in fondo, anche quando si scorre la pagina

Tabelle

1. 33. Assegnare stili ad una tabella

   Le regole di base per formattare al meglio una tabella con i CSS

2. 34. Evidenziare la riga di una tabella al passaggio del mouse

   Una tecnica molto semplice per migliorare l'usabilità delle tabelle

3. 35. Visualizzare una tabella con il colore delle colonne alternato

   Una tecniche semplice per migliorare l'usabilità delle tabelle

Form

1. 36. Applicare stili ai form

   Usare i CSS per modificare l'aspetto e il layout dei moduli

2. 37. Applicare stili a campi di input e textarea

   Formattare un form per renderlo più bello, usabile e in linea con il design della pagina

3. 38. Applicare uno stile ai pulsanti dei form

   Personalizzare l'aspetto di input di tipo submit e button

4. 39. Evidenziare il focus sui campi dei form

   Un comodissimo ausilio per rendere più usabili i nostri moduli

5. 40. Un pulsante di submit con aspetto simile al testo

   Modificare l'aspetto dei pulsanti di invio dei form

6. 41. Differenziare gli stili dei campi di input

   Semplici metodi per personalizzare al meglio i campi di input di un form

Liste

1. 42. Visualizzare una lista in senso orizzontale

   Disporre gli item di una lista su un'unica riga

2. 43. Rimuovere il margine sinistro da una lista

   Formattare una lista operando sul margine degli elementi che la compongono

3. 44. Personalizzare l'aspetto dei marcatori di lista

   Sostituire il classico cerchietto pieno di un item di lista con altri simboli o con immagini

4. 45. Menu verticale statico con le liste

   Codificare una lista nell'HTML e trasformarla in un menu grazie ai CSS

5. 46. Menu orizzontale statico con le liste

   Creare un semplice menu orizzontale sfruttando le liste non ordinate e i CSS

Varie

1. 47. Link su un elemento blocco

   Come rendere cliccabili div, paragrafi ed elementi blocco contenenti link

2. 48. Realizzare un pannello a tab

   Tutto il codice necessario per creare un pannello a schede con i soli CSS

3. 49. Stili personalizzati per Internet Explorer con i commenti condizionali

   Come usare i commenti condizionali per IE così da cambiare stile per la vostra pagina