CSS è il secondo linguaggio che studiamo.

CSS letteralmente sta per cascare hiding style sheet che significa foglio di stile a cascata in italiano, come direbbero i romantici.

Il css sono gli aggettivi in un mondo di parole che sarebbe html a che cosa serve il linguaggio css? Il linguaggio css ci permette di trasformare il contenuto della pagina visualizzata in modo grezzo, per dirla così dal browser in un modo un po' più carino e gradevole alla vista.

Quindi possiamo aggiungere i colori, gli sfondi, allineare il testo ad esempio a destra sinistra centrato, affiancare degli elementi in modo che si creino delle sorti di colonne all'interno della nostra pagina.

Quindi quello che vediamo in questo esempio è un pezzettino della home page di boolean in cui a sinistra ci sono solamente i contenuti senza alcun alcuno stile, mentre a destra è il risultato finale dopo che è stato applicato il CSS.

Come si scrive il linguaggio css? La sintassi è piuttosto semplice c' è bisogno di un selettore, una parentesi graffa e all'interno della parentesi graffa.

Andiamo a scrivere la proprietà due punti e il valore che vogliamo assegnare a questa proprietà.

Tutte le regole che inseriamo nel foglio di stile vengono sempre racchiuse dalle parentesi graffe e questo è importante.

Quindi la prima cosa da fare è capire che cosa devo scrivere al posto del selettore.

Come faccio a selezionare un elemento della pagina? Quindi in questo esempio abbiamo un paragrafo che ha una classe bot é un h uno che ha la stessa classe bot che cos'è una classe è come una specie di etichetta che io posso dare ai miei tag.

Quindi una specie di nome se vogliamo un modo che io per selezionare quei tag distinguerli dagli altri.

Quindi per selezionare questi elementi attraverso la loro classe posso andare a inserire nel mio foglio di stile punto Both aperta la parentesi graffa e ad esempio, se volessi assegnare il colore rosso color due punti, in questo caso tutti gli elementi della mia pagina tutti i tag presenti con la classe bot verranno rappresentati con il testo di colore rosso.

Anche la classe è un attributo.

La classe è un attributo che si può dare a tutti quanti tag html e appunto ci permette di poterli selezionare per poi assegnare dello stile.

Non è l'unico modo con cui io posso selezionare un elemento.

Posso selezionarlo anche in modo più generico tramite il nome del tag.

Quindi se ad esempio ho tanti paragrafi nella pagina e voglio che tutti i paragrafi abbiano il testo in rosso, posso utilizzare semplicemente il nome del rugby aperta graffa color red.

Quindi in questo modo il colore rosso verrà assegnato a tutti i thug p presenti nella mia pagina.

Un altro modo per selezionare gli elementi della pagina è attraverso la discendenza, quindi se ad esempio voglio selezionare tutti i paragrafi che si trovano all'interno di un DVD, in questo caso posso utilizzare il simbolo di spazio, quindi andro' a scrivere di v spazio p é sempre la stessa regola color red, quindi in questo caso solamente i paragrafi che si trovano all'interno di un tag div avranno il colore rosso.

Quelli che non sono all'interno di un TV non saranno in rosso.

Ok, bellissimo però dove lo devo scrivere questo codice CSS? Ho capito come si scrive.

Ho capito la sintassi, ho capito come selezionare i tag dove lo devo scrivere? Chiaramente andiamo a inserirlo in un file dedicato perché non vogliamo che ci sia commistione tra il codice html e il codice css.

Quindi vado a creare una un nuovo file che avrà estensione punto css dentro il quale andro' inserire tutte le regole per collegarlo alla mia pagina dovrò andare a creare un link all'interno del tag ed quindi utilizzando proprio il tag link e specificando il percorso del del foglio di stile utilizzando sempre un attributo a karev.

Vado a collegare il foglio di stile alla mia pagina html vediamo un esempio quindi se ad esempio all'interno del mio tag body inserisco un paragrafo utilizziamo sempre lorem perché ormai siamo degli assi col latino aggiorno la mia pagina e trovero' il mio paragrafo se ad esempio adesso volessi colorare questo paragrafo di rosso dobbiamo andare a creare un nuovo file e lo posso fare utilizzando questi concina forma di foglio con il simbolo più e lo chiamiamo style punto css.

Anche queste sono delle convenzioni dei nomi standard mi raccomando scrive sempre il nome del file in minuscolo e l'estensione punto css quindi ora all'interno di questo foglio posso andare? Me li posso anche affiancare così in modo che ho il mio codice html a sinistra e il mio foglio di stile a destra.

Quindi seleziono il rugby e inserisco la regola color red aggiorna la pagina e chiaramente non succede nulla perché perché non abbiamo collegato il foglio di stile alla nostra pagina html.

Quindi importantissimo andare a inserire il tag link all'interno del tag ed e come a karev andare a specificare il percorso del file quindi style punto css.

Questo percorso deve seguire le stesse regole che abbiamo visto per le immagini, quindi deve sempre essere un percorso relativo rispetto a dove si trova il file html.

Nel mio caso io ce li ho affiancati, quindi non devo entrare in nessuna cartella.

È sufficiente inserire il nome del file.

Quindi ora aggiornando la pagina adesso si il mio testo comparirà in rosso.

Quindi ogni paragrafo che vado ad inserire nella mia pagina creiamo un secondo paragrafo sarà in rosso.

Se inserisco ad esempio un h una i primi passi con il css, aggiorno il mio titolo.

Chiaramente non sarà in rosso sarà in nero proprio perché io ho dato il colore rosso al rugby se ad esempio adesso volessi creare un selettore abbiamo visto per classe, quindi ad esempio crea una classe blu a cui do chiaramente il colore blu.

Questa classe la posso assegnare ad un qualsiasi tag, quindi prendo il secondo paragrafo che abbiamo creato e gli assegno la classe blu.

Quindi, utilizzando il nome che abbiamo utilizzato nel nostro foglio di stile, aggiorno la pagina e quindi vedrò il secondo paragrafo in blu e qui scopriamo una prima cosa importante del CSS, che è appunto quello che sta nel nome del CSS foglio di stile a cascata.

Che cosa significa? Significa che le regole che vengono più in basso nel mio foglio di stile, quindi nell' ordine che stanno sotto, vanno a sovrascrivere eventuali regole che stanno sopra se vanno a selezionare lo stesso elemento.

Chiaramente.

Quindi in questo caso è vero che io avevo preso tutti i paragrafi e gli avevo assegnato il colore rosso, ma la regola successiva è che tutti gli elementi con la classe blu hanno il colore blu e quindi nel mio caso il secondo paragrafo avrebbe il colore p avrebbe il colore rosso, ma viene visualizzato in blu perché è la seconda regola.

Ma C' è un altro motivo per cui questo paragrafo viene fuori in blu, che è il selettore classe.

Il selettore classe è più importante e più specifico rispetto al selettore con il nome del tag, perché chiaramente il nome del tag molto più generico rispetto ad una singola classe e quindi avrà sicuramente la precedenza la priorità rispetto al tag classe rispetto al tag al selettore per tag abbiamo poi visto che è possibile selezionare degli elementi anche tramite il proprio genitore, il proprio contenitore.

Quindi abbiamo visto ad esempio creando un tag di v che abbiamo visto che è un contenitore generico e all'interno di questo div crea un secondo paragrafo.

Ora se io salvo così com'è, questo paragrafo comparirà in rosso chiaramente perché perché viene sempre associato associata alla regola col color red è sempre un paragrafo.

Se però io faccio un selettore spazio p ed o ad esempio un color green, questo paragrafo diventa verde perché anche in questo caso la regola viene dopo ed è un pochettino più specifica rispetto a p semplice come selettore.

Questo selettore prende tutti i paragrafi all'interno di un di v, quindi il primo paragrafo non si trova all'interno di un di v, quindi compare in rosso.

Il secondo paragrafo non si trova all'interno di un di v, ma la classe blu e quindi prende il colore blu.

Il terzo paragrafo si trova all'interno di un tag di v e quindi prende il colore verde.

Per vedere meglio tutte queste regole di stile che vengono assegnate agli elementi della mia pagina, possiamo utilizzare quello che si chiama Inspector All'interno del browser Chrome, quindi uno strumento per sviluppatori che è possibile visualizzare utilizzando o il tasto destro del mouse ispeziona oppure posso utilizzare più comodamente il tasto F dodici della mia tastiera.

Che cosa succede nel momento in cui io apro questo questa console trovero' diverse tab Quelle che per il momento ci interessano sono la tab elementi che è suddivisa in parte HTML e parte di stile.

Quindi nella parte HTML vediamo tutta la struttura della pagina, quindi vediamo che è riportato il TED con tutto il contenuto, il tag body e il contenuto della pagina che abbiamo scritto.

Quindi abbiamo il primo paragrafo il secondo paragrafo con la classe blu, il terzo paragrafo all'interno del nostro dive.

Cliccando su questi triangolini è possibile espandere i tag per vedere il contenuto.

Quindi, cliccando su uno di questi tag su un elemento vedo sulla destra tutti gli stili che vengono applicati.

Quindi il primo paragrafo è il paragrafo più più generico che prende appunto la regola più generica con il selettore P selettore paragrafo e in effetti vedo che questo è il color red, eh il link spector mi fa anche vedere da dove viene questa regola.

Quindi qui sulla destra vedo che c' è stata il punto css.

Rimanendo in over con il mouse mi compare anche tutto il percorso del file e mi fa vedere dove si trova che è proprio il file che abbiamo appena creato cliccando sul secondo paragrafo.

Troverò in questo caso il colore che viene sovrascritto.

Quindici è sempre la regola perché si tratta pur sempre di un paragrafo con il colon red che però viene sovrascritto.

Quindi questa riga che cancella, diciamo il colon reed viene sovrascritto dalla seconda regola che abbiamo scritto con il selettore classe punto blu infatti vediamo che è di colore blu l'ultimo paragrafo quello che si trova all'interno del dvd anche adesso il selettore che viene sovrascritto, quindi il color red che viene sovrascritto dal selettore leggermente più specifico che abbiamo creato con div spazio quindi un selettore gerarchico e in effetti al colore verde