01 - Io non ho mai provato CSS!
CSS
01 - Io non ho mai provato CSS! /1
CSS

01 - Cominciamo a creare un documento HTML.

Crea una cartella per gli esercizi CSS e al suo interno crea una cartella 01 per questa attività.

Crea il file index01.html con il codice di seguito specificato ed osserva la pagina web che produce.

index01.html 
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Le quattro libertà del software libero</title>
  5.         <meta charset="UTF-8" />
  6.     </head>
  7.     <body>
  8.         <h1>Libertà 0</h1>
  9.         <p>Libertà di eseguire il programma per qualsiasi scopo.</p>
  10.         <h1>Libertà 1</h1>
  11.         <p>Libertà di studiare il programma e modificarlo.</p>
  12.         <h1>Libertà 2</h1>
  13.         <p>
  14.             Libertà di ridistribuire copie del programma 
  15.             in modo da aiutare il prossimo.
  16.         </p>
  17.         <h1>Libertà 3</h1>
  18.         <p>
  19.             Libertà di migliorare il programma e di distribuirne 
  20.             pubblicamente i miglioramenti, in modo tale che tutta la comunità 
  21.             ne tragga beneficio.
  22.         </p>
  23.     </body>
  24. </html>
01 - Io non ho mai provato CSS! /2
CSS

02 - Inseriamo una dichiarazione CSS in un elemento specifico.

Sempre nella cartella 01 crea una copia del file index01.html e chiamala index02.html.

Modifica la riga numero 8 di questo documento inserendo una dichiarazione come mostrato qui di seguito.

index02.html 
  1. <h1 style="background-color:red;" >Libertà 0</h1>

Adesso apri la pagina web prodotta da questo documento html in una nuova scheda del browser e osserva le differenze tra questa pagina e quella precedente. Cosa è cambiato?

cosa ho imparato?

È arrivato il momento di raccogliere le mie sfide!

sfida 01
Sei capace di modificare il colore di sfondo di un altro elemento h1?
sfida 02
Ok, allora sarai capace anche di modificare il colore di sfondo di un elemento di tipo paragrafo.
sfida 03
Quale sarà la proprietà per cambiare il colore del testo? Attenzione! Non il colore di sfondo ma quello del testo!
Fai diventare giallo il testo dell'ultimo h1.
sfida 04
Bene, e sei capace di modificare due proprietà per lo stesso elemento?
Imposta il colore dell'ultimo paragrafo a bianco e contemporaneamente il suo sfondo a grigio.

Adesso fai le tue considerazioni sull'attributo style.

cosa ho imparato?
01 - Io non ho mai provato CSS! /3
CSS

03 - Definiamo una regola CSS per tutti gli elementi di un certo tipo.

Crea una copia del file index01.html e chiamala index03.html.

Inserisci nella sezione head l’elemento style che contiene la seguente regola per l'elemento h1.

index03.html 
  1.         <style>
  2.             h1 {
  3.                 background-color: red;
  4.                 color: white;
  5.             }
  6.         </style>

Assicurati di aprire questa nuova pagina web in una nuova scheda del browser. Cosa è cambiato rispetto a prima? Perchè? Cosa fa l'elemento style? In che cosa differiscono l'attributo style dall'elemento style. Scrivilo nella sezione in basso.

cosa ho imparato?

Ed ora una piccola sfida per te.

sfida 01
Utilizzando l'elemento style (e non l'attributo) scrivi una regola per gli elementi di tipo p ed un'altra per gli elementi di tipo h1.

A questo punto del tuo percorso sei già in grado di individuare le differenze tra regola e dichiarazione?

cosa ho imparato?
01 - Io non ho mai provato CSS! /4
CSS

04 - Creiamo un file a parte dove inserire tutte le regole CSS.

Crea una copia del file index01.html e chiamala index04.html.

Inserisci nella sezione head l’elemento link indicato di seguito.

index04.html 
  1. <link type="text/css" rel="stylesheet" href="stili.css" />

Adesso crea un nuovo file nella cartella 01 creata all'inizio, chiamalo stili.css e riempilo con la regola qui sotto.

stili.css 
  1. h1 {
  2.     background-color: red;
  3.     color: white;
  4.     font-family: monospace;
  5.     font-size: 28px; 
  6. }

Apri la pagina web in una nuova scheda. Come mai ottieni la stessa pagina web? Cosa hai imparato in questo esercizio?

cosa ho imparato?

Ed ecco qui le sfide di questa scheda.

sfida 01
Esiste un modo per applicare le stesse dichiarazioni a più di un tipo di elemento.
In questo esempio abbiamo solo due tipi di elementi: p e h1, riesci a scrivere una sola regola che sia applicata ad entrambi? Ricorda di usare un file esterno.
sfida 02
Adesso proviamo una proprietà nuova! Si chiama text-align e può assumere i valori: left, center, right e justifj. Fai le tue prove e cerca di capire a cosa serve.

A cosa serve la proprietà text-align?

cosa ho imparato?
01 - Io non ho mai provato CSS! /5
CSS

05 - Fogli di stile a "cascata".

Realizza il file index05.html.

index05.html 
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Le quattro libertà del software libero</title>
  5.         <meta charset="UTF-8" />
  6.         <link type="text/css" rel="stylesheet" href="stili.css" />
  7.         <style> h1 { background-color: blue;} </style>
  8.     </head>
  9.     <body>
  10.         <h1 style="background-color: green;">Libertà 0</h1>
  11.         <p>Libertà di eseguire il programma per qualsiasi scopo.</p>
  12.         <h1>Libertà 1</h1>
  13.         <p>Libertà di studiare il programma e modificarlo.</p>
  14.         <h1>Libertà 2</h1>
  15.         <p>
  16.             Libertà di ridistribuire copie del programma 
  17.             in modo da aiutare il prossimo.
  18.         </p>
  19.         <h1>Libertà 3</h1>
  20.         <p>
  21.             Libertà di migliorare il programma e di distribuirne 
  22.             pubblicamente i miglioramenti, in modo tale che tutta la comunità 
  23.             ne tragga beneficio.
  24.         </p>
  25.     </body>
  26. </html>

Nota che sia il file esterno stili.css (usiamo quello già realizzato prima) che l'elemento style, che l'attributo style intervengono sullo sfondo di elementi h1: che pagina web ti aspetti?

sfida 01
Modifica il codice fino a quando non hai capito l'ordine di priorità dei tre strumenti.
sfida 02
Cosa succede se una certa sezione (l'elemento style o il file esterno .css) contiene dichiarazioni contrastanti?

Hai capito perchè questi fogli di stile si chiamano "a cascata"?

cosa ho imparato?
01 - Io non ho mai provato CSS! /6
CSS

06 - Annulliamo le scelte non fatte da noi: il reset.

Crea una copia del file index01.html e chiamala index06.html.

Inserisci nella sezione head l’elemento link indicato di seguito.

index06.html 
  1. <link type="text/css" rel="stylesheet" href="reset.css" />

Adesso fai una ricerca sul web con le parole reset e meyer (Eric Meyer è quello che per primo si è accorto della necessità di resettare tutto). Copia tutto il codice che ha scritto Meyer in un nuovo file reset.css (che terrai sempre nella cartella 01).

Osserva le pagina web prodotte dai due file index01.html e index06.html. In cosa differiscono? Hai capito cosa ha fatto il reset?

Adesso, nella sezione head di index06.html dopo l’elemento link appena inserito, aggiungi il precedente elemento link.

index06.html 
  1. <link type="text/css" rel="stylesheet" href="stili.css" />

Osserva le pagina web prodotte dal tuo file index06.html e dal precedente file index04.html (che è identico al tuo nuovo file index06.html a meno del link con "reset.css").

sfida 01
Sei capace di intuire cosa succede se inverti l'ordine dei due elementi link in index06.html?

Hai capito a cosa serve il file di reset? Cosa voleva ottenere Eric Meyer? E perchè?

cosa ho imparato?
01 - Io non ho mai provato CSS! /7
CSS

07 - Mettiamo le cose in ordine

Crea una copia del file index01.html e chiamala index07.html, inserisci quindi le seguenti due righe di codice nell'elemento head.

Attenzione! Questa è da considerarsi una buona abitudine.

index07.html 
  1. <link type="text/css" rel="stylesheet" href="reset.css" />
  2. <link type="text/css" rel="stylesheet" href="stili07.css" />

Successivamente crea il file stili.css con una regola per l'elemento body ed altre regole.

Attenzione! Stabilire una dimensione di base del font a 62.5% e decidere la dimensione di tutti i testi sulla base di esso è da considerarsi una buona abitudine.

stili07.css 
  1. body {
  2.     font-size: 62.5%;
  3. }
  5. h1 {
  6.     background: red;
  7.     color: white;
  8.     font-family: monospace;
  9.     font-size: 3em; 
  10. }
  12. p {
  13.     font-size: 1.5em; 
  14. }

Hai capito che differenza c'è nel dare un valore a font-size espresso in pixel (px) o in em o in percentuale (%)?
Hai capito qual è la sintassi per specificare un valore espresso in una certa unità di misura o percentuale?

cosa ho imparato?
01 - Io non ho mai provato CSS! /8
CSS

08 - Una miriade di proprietà e valori al nostro servizio.

Ma quali sono le proprietà? E come faccio a sapere quali valori possono assumere?

Sul web ci sono tanti bei manualetti come quello che ho messo qui: www.bbuio.it/prof/css3.pdf, all'interno del quale troverai tutte le proprietà divise per sezione.

Vediamo per esempio la sezione dedicata ai font.

sezione font
sfida 01
Sei capace di mostrare un testo in grassetto?
sfida 02
Sei capace di mostrare un testo in maiuscoletto?

Sapresti spiegare a cosa servono le proprietà viste sopra?

cosa ho imparato?

Perchè alcuni valori vengono presentati in corsivo ed altri no?
Hai capito qual è la differenza tra lenght e number?

cosa ho imparato?
01 - Io non ho mai provato CSS! /9
CSS

09 - Famiglie di proprietà.

Fai una copia di index07.html e chiamala index09.html.
Successivamente modifica la riga 7 di questo nuovo documento come segue.

index09.html 
  1. <link type="text/css" rel="stylesheet" href="stili07.css" />

Fai una copia di css07.html e chiamala css09.html.
Successivamente modifica la riga 13 di questo nuovo documento come segue.

stili09.css 
  1.     font: italic normal bolder 1.5em Verdana;

Osserva la pagina web prodotta alla luce dell'immagine che segue.

sezione font

Cosa puoi dire di aver capito delle proprietà che il manualetto presenta in rosso?

cosa ho imparato?

Adesso (tenendo a portata di mano il manualetto) prova ad affrontare queste sfide.

sfida 01
Prova a realizzare una pagina web con uno sfondo arancione.
sfida 02
Prova a realizzare una pagina web con una immagine di sfondo. Per creare la tua immagine di sfondo usa la webapp presente a questo indirizzo: bgpatterns.com. L'immagine creata sarà presentata come un quadrato 200 per 200 pixel. Lo sfondo dovrà scorrere con il contenuto della pagina web.
sfida 03
Riesci a realizzare l'esercizio precedente adoperando la sola proprietà background?
01 - Io non ho mai provato CSS! /10
CSS

10 - I colori.

Fai una copia di index09.html e chiamala index10.html.
Successivamente modifica la riga 7 di questo nuovo documento come segue.

index10.html 
  1. <link type="text/css" rel="stylesheet" href="stili10.css" />

Fai una copia di stili09.css e chiamala stili10.css.

Effettua le dovute modifiche al file css per cambiare i colori di background e di foreground sia dei titoli che dei paragrafi.

Per stabilire i colori da usare puoi andare su color.adobe.com e scegliere coppie di colori che stanno bene insieme.

Per specificare un colore in CSS - oltre che usare il nome del colore stesso (in inglese) - si può indicare la quantità di red (rosso), di green (verde) e blue (blu). Tale quantità può essere espressa con un valore intero (0-255), con un valore esadecimale (00-FF) o con un valore percentuale.

codice css 
  1. color: red;                /* il nome del colore */
  2. color: #ff0000;            /* #rrggbb -> quantità esadecimale di red, green e blue */
  3. color: #f00;               /* #rgb -> come sopra con una sola cifra hex per colore */
  4. color: rgb(255,0,0);       /* rgb(r,g,b) -> la quantità di red, green e blue (o-255) */
  5. color: rgb(100%,0,0);      /* rgb/r%,g%,b%) -> percentuale di red, green e blue */

Adesso rifletti su questo esercizio e non dimenticare di scrivere quale dei metodi presentati reputi il più comodo e potente.

cosa ho imparato?

Adesso una sfida per gente sveglia.

sfida 01
Sei capace di fornire ad un elemento uno sfondo con gradiente?
Puoi (ovviamente) chiedere a Google.
cosa ho imparato?