CSS – Introduzione
CSS è il linguaggio utilizzato per definire lo stile di una pagina web. Ci permette di specificare tramite delle regole come i browser renderizzeranno i nostri elementi HTML. Tramite CSS è possibile cambiare drasticamente il look&feel di una pagina web.
Cos’è CSS?
CSS sta per Cascading Style Sheets
CSS descrive come gli elementi HTML verranno mostrati su schermo, carta o altri media
CSS è composto da una serie di regole che stabiliscono delle proprietà visive
CSS risparmia un sacco di lavoro, perché permette di controllare in un colpo solo il layout di molte pagine web
Anche i fogli di stile esterni vengono scritti in file CSS
CSS permette di creare dei contenuti web di tipo “responsive” (che scalano con la dimensione dello schermo e vengono mostrati sempre in modo perfetto)
Come aggiungere CSS ad una pagina web?
Esistono tre modi per aggiungere del CSS ad una pagina web:
In modo diretto sugli elementi tramite attributo style=”…”
<div style="...">Lorem Ipsum</div>
Utilizzando il tag <style> all’interno del tag <head>
<style>
selector {
/* declarations */
}
</style>
Importando un file esterno
<link rel="stylesheet" href="styles.css" />
Regole CSS
Ogni regola CSS è formata da tue parti:
Selettore: una formula che rappresenta gli elementi che intendiamo selezionare con la nostra regola
Dichiarazione: una o più coppie di chiave/valore per cambiare determinate proprietà visive dell’elemento
p {
background-color: red;
color: white;
}
Ogni paragrafo (p) della pagina avrà ora un colore di sfondo rosso e un colore del testo bianco.
p è il selettore (in questo caso, il nome di un tag)
all’interno delle parentesi graffe troviamo la dichiarazione, con le coppie separate da punti e virgola
background-color e color sono solamente due delle proprietà disponibili in CSS. Puoi trovare un elenco completo qui. Ci sono un sacco di proprietà utili a cambiare colori, dimensioni, font, layout, a creare animazioni e comportamenti responsive e dinamici.
Selettori CSS
Nella definizione di una regola CSS dobbiamo specificare gli elementi che intendiamo selezionare nella pagina. Nell’esempio precedente abbiamo utilizzato il nome di un tag per selezionare tutti gli elementi di quel tipo.
Esistono altri modi per creare un selettore:
nome del tag (es. div, p, a, img, ecc.)
classe CSS (un attributo che è possibile assegnare a diversi elementi della pagina per raggrupparli nello stesso selettore)
<div class="text-bold text-white">Contenuto del div</div>
id CSS (un attributo con un valore unico, applicabile ad un unico elemento nel documento)
<div id="unique">Contenuto del div</div>
attributi (es. [alt=”whatever”] applicherà le regole specificate a tutti gli elementi con alt=”whatever”)
Puoi utilizzare tutte queste strategie per selezionare elementi in una pagina web. Puoi trovare l’argomento spiegato in maggiore dettaglio qui:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
Combinatori CSS
È possibile combinare insieme diversi selettori in modo da ottenerne uno più specifico. Ad esempio:
div p {
color: red;
}
imposterà il colore del testo a rosso per tutti i paragrafi (p) che sono discendenti di (contenuti in) un div.
Esistono diversi combinatori che possono venire utilizzati:
A B Combinatore discendente: specifica che l’elemento selezionato con B debba essere un discendente dell’elemento A, anche se non necessariamente un figlio diretto.
div p {
color: red;
}
A + B Selettore di fratelli adiacenti: specifica che l’elemento selezionato con B debba avere lo stesso elemento genitore di A, e che B segua immediatamente l’elemento A orizzontalmente nel DOM.
div + p {
color: red;
}
A > B Selettore di figli: specifica che l’elemento selezionato con B debba essere un discendente dell’elemento A, e che sia necessariamente un figlio diretto.
div > p {
color: red;
}
Puoi imparare di più sui combinatori qui:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#combinators
Applica dello stile sulla sezione principale di un sito web!
Avrai bisogno di:
L’URL di una bella immagine di un paesaggio
Il font Prata da fonts.google.com
Il font Montserrat in pesi 400 e 600 italic da fonts.google.com
ESERCIZIO
Segui questi step per creare la tua prima pagina web:
Crea un documento vuoto, chiamalo index.html e fai in modo di partire da un boilerplate come è stato fatto nel video
Resetta i margini sul tag body
Importa i font nel tag head
Crea un div contenitore per la sezione principale e dagli una classe di “main-section” per applicare un padding su tutti i lati di 20px
Crea un ulteriore div all’interno e dagli una classe “image-container”
Applica dello stile su “image-container” in modo da renderlo alto 500px e applica la tua immagine di sfondo come suo background (controlla qui per sapere come fare)
Aggiungi un h1 al di sotto dell’immagine con il nome del luogo
Applica a questo h1 il font Prata, con un font-size di 64px e un peso di 400
Aggiungi un h3 al di sotto dell’h1 con la zona o la regione del paesaggio, applica lo stesso font, 24px di dimensione, peso 400 e margine superiore pari a 0
Fornisci ad h1 e h3 un margin-bottom pari a 0
Applic Montserrat come font del body
Sotto aggiungi un paragrafo con il nome dell’autore dell’immagine (es. Autore: Nome Cognome)
Circonda il nome e il cognome con un link che porti alla sua pagina profilo
Applica al link un peso di 600 e uno stile corsivo
Aggiungi sotto un tag h6 con scritto: “Luoghi correlati”
Applica all’h6 un padding di 22px, un margine inferiore di 0px, un margine superiore di 56px, colore del testo bianco, bordi arrotondati di 6px e un gradiente orizzontale come sfondo. Scegli come step per il gradiente due colori presi dalla foto di sfondo.
Crea una lista non ordinata sotto l’h6 con 5 elementi, ognuno avente il nome di un luogo correlato
Applica alla lista non ordinata uno stile in modo da rimuovere i punti a sinistra e il padding di default
Inserisci ogni elemento della lista in un link. Usa come indirizzo qualcosa come “./nome-del-luogo.html”
Fai in modo che ogni elemento della lista abbia un padding top e bottom di 6px, 22px di padding-left, un bordo inferiore di 1px di questo colore: #dfdfdf
Rimuovi la sottolineatura dagli elementi contenuti nella lista e cambia il colore di quelli utilizzati con il primo dei due colori utilizzati per il gradiente
Ora duplica la pagina index.html tutte le volte che vuoi e fornisci a ogni copia lo stesso nome che hai utilizzato nei link (es. “./nome-del-luogo.html”)
Aggiorna le informazioni del testo, l’immagine, l’autore, il gradiente di sfondo per l’h6 e il colore dei link visitati in in ogni pagina in modo da rispecchiare il nuovo luogo
Aggiungi un footer al di fuori della sezione principale, coloralo in nero e accertati che il colore del testo sia bianco. Aggiungi 16px per il padding (se hai fatto tutto correttamente dovrebbe comparire attaccato ai bordi sinistro, inferiore e destro).
Aggiungi un link per l’homepage “./index.html” e centralo
Ora dovresti essere in grado di navigare attraverso tutte le pagine utilizzando i link e ritornare all’homepage
Complimenti! Hai creato, applicato uno stile e collegato ogni pagina web!
