Corso completo Web Developer - Parte 2 - 2.2
Introduzione
Nel precedente articolo CSS Per Principianti abbiamo scoperto quali sono le basi di CSS, in questo articolo andremo a vedere le parti più importanti da conoscere assolutamente. Andremo a fare prima un pò di teoria e poi andremo a vedere come applicare tutto ciò che abbiamo visto nel sito web del Colosseo.
La base HTML sul quale andremo a lavorare:
<!DOCTYPE html>
<html>
<head>
<title>Colosseo</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div className="container">
<h1 className="titolo" id="titolo-principale">Benvenuto sul sito del Colosseo, il monumento più famoso di Roma</h1>
<h2>Il Colosseo, la più bella rovina di Roma, termina il nobile recinto dove si manifesta tutta la storia.</h2>
<p>Il Colosseo è stato costruito in una valle, dopo aver asciugato un piccolo lago che Nerone usava per la Domus Aurea tra le colline di Palatino, Esquilino e Celio. Il Colosseo è diventato il più grande anfiteatro romano, con una struttura ellittica lunga 188 metri, larga 156 metri ed alta 57 metri.</p>
<a href="https://it.wikipedia.org/wiki/Colosseo">Visita la pagina di Wikipedia per maggiori informazioni</a>
</div>
<div className="container">
<h4>I principali luoghi di interesse vicino al Colosseo</h4>
<ul>
<li>Foro Romano</li>
<li>Pantheon</li>
<li>Piazza Navona</li>
</ul>
<img id="colosseo-pic" src="https://images.unsplash.com/photo-1604580864964-0462f5d5b1a8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" alt="colosseo">
<a href="mailto:email@email.com">Contattami ora inviandomi un e-mail</a>
</div>
</body>
</html>
La base CSS sul quale andremo a lavorare:
body {
background-color: #8f7878;
}
h1 {
color: #edf75a;
}
.titolo {
color: green;
}
#titolo-principale {
color: beige;
}
h4 {
color: beige;
}
h4 {
color: green;
}
a {
text-decoration: none;
color: #dfbdb6;
border-bottom: 2px solid #ff5733;
display: block;
margin-top: 20px;
width: fit-content;
}
.container {
width: 800px;
margin-top: 0;
margin-bottom: 60px;
margin-left: auto;
margin-right: auto;
}
#colosseo-pic {
width: 500px;
border: 1px dotted black;
margin-top: 30px;
margin-bottom: 30px;
}
Questo è come viene visualizzato nel Browser
Ora iniziamo! 💪
Selector Combinations
I selettori combinati ci permettono di selezionare elementi HTML in base a più criteri. Ad esempio, possiamo selezionare tutti gli elementi h1 che sono figli di un elemento con una classe container:
.container h1 {
color: #acf37f;
}
Selezionare molteplici elementi
Andiamo a vedere come selezionare più elementi HTML in un unico selettore combinato. Ad esempio, possiamo selezionare tutti gli elementi h1 e h2 che sono figli di un elemento con una classe container:
.container h1, .container h2 {
color: #acf37f;
}
Nota che abbiamo usato una virgola per separare i due selettori.
Selezionare elementi figli di un elemento (o nested)
Questa tecnica in parole povere ci permette di selezionare elementi HTML che sono contenuti all'interno di altri elementi HTML.
Se volessimo selezionare tutti gli elementi h4 che sono figli di un elemento div potremmo ad esempio scrivere:
div > h4 {
color: #ff5e36;
}
Box Model
Rispondiamo subito alla domanda: che cos'è il box model in parole povere?
Questo termine all'inizio può sembrare un po' complicato, ma in realtà è molto semplice.
Il box model è una rappresentazione grafica di un elemento HTML. Ogni elemento HTML è rappresentato da un rettangolo che contiene il contenuto dell'elemento e che può avere un bordo, un contenuto, un riempimento ed un margine.
Infatti, il box model rappresenta un elemento HTML attraverso questi quattro componenti:
- Content: il contenuto dell'elemento HTML, lo spazio interno dove viene visualizzato il testo, un immagine o un altro elemento HTML (elemento figlio / nested)
- Padding: lo spazio tra il contenuto e il bordo. Pensa a questo come un riempimento tra il contenuto e il bordo. Il padding è un riempimento interno. Possiamo specificare un colore di riempimento diverso dal colore di sfondo
- Border: il bordo dell'elemento HTML che semplicemente circonda il riempimento
- Margin: lo spazio tra l'elemento e gli altri elementi
È importante capire il concetto del box model perchè ci permette di capire come funziona il layout di un sito web. Quando andiamo a stilizzare un elemento HTML si dice che stiamo manipolando il box model dell'elemento.
Le misurazioni relative e assolute
Quando stiamo stilizzando un elemento HTML, possiamo specificare le misure in due modi:
- Relative: le misure relative sono misure relative ad altri elementi. Ad esempio, possiamo specificare che un elemento HTML abbia una larghezza del 50% della larghezza del suo genitore. In questo caso, la larghezza dell'elemento sarà il 50% della larghezza del suo genitore.
- Absolute: le misure assolute sono misure fisse. Ad esempio, possiamo specificare che un elemento HTML abbia una larghezza di 200px. In questo caso, la larghezza dell'elemento sarà sempre 200px.
Come possiamo vedere, al momento la foto del nostro Colosseo ha una larghezza assoluta di 500px. Questo significa che la larghezza della foto sarà sempre 500px, indipendentemente dalla larghezza del browser.
Andiamo a modificare la larghezza assegnata con la proprietà width con un valore relativo. Ad esempio, possiamo specificare che la larghezza della foto sia il 50% della larghezza del suo genitore. In questo caso, la larghezza della foto sarà il 50% della larghezza del suo genitore, che è il container che ha una larghezza di 800px.
Ti ricordo che quando vedi del testo in CSS preceduto da // significa che è un commento. I commenti in CSS non vengono visualizzati nel browser, ma sono utili per aiutarci a capire cosa stiamo scrivendo.
#colosseo-pic {
width: 50%; // questo è il valore che stiamo modificando
border: 1px dotted black;
margin-top: 30px;
margin-bottom: 30px;
}
Pseudo Classi
Quando si parla di Pseudo Classi in CSS si intende una classe che viene aggiunta dinamicamente ad un elemento HTML. Questo significa che possiamo aggiungere una classe ad un elemento HTML in base ad un evento o uno stato speciale in cui si trova l'elemento.
Ad esempio, possiamo aggiungere una classe ad un elemento HTML quando l'utente passa il mouse sopra l'elemento utilizzando la pseudo classe :hover. Andiamo ad aggiungere una classe hover all'elemento #colosseo-pic quando l'utente passa il mouse sopra l'elemento.
Quindi aggiungiamo il seguente codice CSS alla fine del file CSS style.css (senza cancellare il codice in #colosseo-pic che abbiamo scritto precedentemente):
#colosseo-pic:hover {
border: 3px solid yellow;
width: 100%;
}
Ora prova a passare con il mouse sopra la foto del Colosseo. Vedrai che la foto si ingrandirà e il bordo diventerà giallo 🙂
Aggiungere il Menù al sito web del Colosseo
Hai mai visto un sito web senza un menù? Oggi come oggi i design dei siti web sono molto stravaganti quindi immagino che sicuramente ti sarà capitato 😁 ma posso dirti che queste sono eccezioni e che la maggior parte dei siti web necessita di un menù per permettere agli utenti di navigare tra le varie pagine del sito.
Per pura curiosità ti dico che i siti web senza un menù sono solitamente siti web che hanno una sola pagina e che tutto il contenuto va dall'alto verso il basso e solitamente viene delineata la differenza tra le varie sezioni del sito attraverso l'utilizzo di immagini o colori. Questi siti web hanno un nome specifico ovvero SPA o Single Page Application.
Andiamo a creare il menù per il nostro sito web del Colosseo. Per prima cosa andiamo ad aggiungere un tag header che verrà posizionato tra il tag body e la prima div.
<body>
<header>
</header>
</body>
Adesso all'interno del tag header aggiungiamo un tag nav che conterrà il menù.
<header>
<nav>
</nav>
</header>
Ora aggiungeremo un tag ul che conterrà la lista dei link del menù.
<nav>
<ul>
</ul>
</nav>
Ora aggiungiamo i link del menù. Visto che il nostro sito web ha solo una pagina, aggiungiamo dei link che ci portano a siti web esterni contenenti informazioni sul Colosseo. Utilizzeremo il buon e vecchio Wikipedia come fonte di informazioni 😁
<ul>
<li><a target="_blank" href="https://it.wikipedia.org/wiki/Colosseo#Storia">La Storia</a></li>
</ul>
Nota che ho utilizzato l'attributo target="_blank" per aprire il link in una nuova scheda del browser. Questo è un buon modo per non far perdere all'utente il sito web che sta visitando.
Ora terminiamo il menù con l'aggiunta di altri due links
<header>
<nav id="menu">
<ul>
<li><a target="_blank" href="https://it.wikipedia.org/wiki/Colosseo#Storia">La Storia</a></li>
<li><a target="_blank" href="https://it.wikipedia.org/wiki/Colosseo#Descrizione_dell'edificio">Descrizione dell'edificio</a></li>
<li><a target="_blank" href="https://it.wikipedia.org/wiki/Colosseo#Bibliografia">Bibliografia</a></li>
</ul>
</nav>
</header>
Perfetto, a questo punto il tuo sito dovrebbe avere un aspetto simile a questo:
Siamo riusciti ad aggiungere la parte HTML del menù. Ora andiamo a darci un po' di stile!
#menu {
text-align: center;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
display: inline-block;
padding: 10px;
}
A questo punto il tuo menù dovrebbe avere un aspetto più carino e simile a questo:
Responsive Design
Ora che abbiamo creato il nostro sito web, è il momento di renderlo responsive.
Innanzitutto cosa s'intende per responsive design? Il responsive design è un approccio alla progettazione di siti web che permette ai siti web di adattarsi alle diverse dimensioni dello schermo e dei dispositivi utilizzati per visualizzare il sito web.
Oggi come oggi abbiamo tanti tipi di dispositivi sui quali vorremmo esporre i nostri contenuti. Per esempio possiamo avere un computer, un cellulare, uno smartwatch, una smart TV, un tablet, ecc.
Ognuno di questi dispositivi ha uno schermo diverso. Affinchè il nostro contenuto possa essere visibile correttamente a prescindere dallo schermo sul quale si sta visualizzando dobbiamo avere un design che si adatti automaticamente in base a due principali caratteristiche: la larghezza e l'altezza dello schermo.
Storicamente un design veniva sviluppato partendo sempre dalla visualizzazione Desktop per poi passare alla visualizzazione Table ed infine a quella Mobile.
Ad oggi, considerato che la maggior parte del traffico web proviene dallo smartphone esiste il cosiddetto "Mobile first design" ovvero l'ordine opposto rispetto a quello tradizionale.
Partendo dalla base del nostro sito del Colosseo andiamo a modificare il CSS per renderlo responsive.
Prima di tutto andremo ad aggiungere le unità di misura utilizzare per impostare le varie width da Pixel a Percentuale.
Aggiorniamo la width dell'elemento con classe container da 800px a 75%
.container {
width: 75%;
}
Ora andiamo a modificare tutti gli elementi contenuti all'interno dei container dandogli una width del 100% e allineando il testo al centro
.container > * {
width: 100%;
text-align: center;
}
Ed infine aggiorniamo gli elementi ul rimuovendo le proprietà margin, padding e list-style che vengono aggiunte di default
ul {
list-style: none;
margin: 0;
padding: 0;
}
Possiamo provare a ridurre le dimensioni del browser notando come la grandezza dei vari elementi si adatti automaticamente allo schermo.
Il risultato finale del tuo codice HTML dovrebbe essere questo:
<!DOCTYPE html>
<html>
<head>
<title>Colosseo</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<nav id="menu">
<ul>
<li><a target="_blank" href="https://it.wikipedia.org/wiki/Colosseo#Storia">La Storia</a></li>
<li><a target="_blank" href="https://it.wikipedia.org/wiki/Colosseo#Descrizione_dell'edificio">Descrizione dell'edificio</a></li>
<li><a target="_blank" href="https://it.wikipedia.org/wiki/Colosseo#Bibliografia">Bibliografia</a></li>
</ul>
</nav>
</header>
<div className="container">
<h1 className="titolo" id="titolo-principale">Benvenuto sul sito del Colosseo, il monumento più famoso di Roma</h1>
<h2>Il Colosseo, la più bella rovina di Roma, termina il nobile recinto dove si manifesta tutta la storia.</h2>
<p>Il Colosseo è stato costruito in una valle, dopo aver asciugato un piccolo lago che Nerone usava per la Domus Aurea tra le colline di Palatino, Esquilino e Celio. Il Colosseo è diventato il più grande anfiteatro romano, con una struttura ellittica lunga 188 metri, larga 156 metri ed alta 57 metri.</p>
<a href="https://it.wikipedia.org/wiki/Colosseo">Visita la pagina di Wikipedia per maggiori informazioni</a>
</div>
<div className="container">
<h4>I principali luoghi di interesse vicino al Colosseo</h4>
<ul>
<li>Foro Romano</li>
<li>Pantheon</li>
<li>Piazza Navona</li>
</ul>
<img id="colosseo-pic" src="https://images.unsplash.com/photo-1604580864964-0462f5d5b1a8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" alt="colosseo">
<a href="mailto:email@email.com">Contattami ora inviandomi un e-mail</a>
</div>
</body>
</html>
Ed il risultato finale del tuo codice CSS dovrebbe esser questo:
body {
background-color: #8f7878;
}
h1 {
color: #edf75a;
}
.titolo {
color: green;
}
#titolo-principale {
color: beige;
}
h4 {
color: beige;
}
h4 {
color: green;
}
a {
text-decoration: none;
color: #dfbdb6;
border-bottom: 2px solid #ff5733;
display: block;
margin-top: 20px;
width: fit-content;
}
.container {
width: 75%;
margin-top: 0;
margin-bottom: 60px;
margin-left: auto;
margin-right: auto;
}
#colosseo-pic {
width: 100%;
border: 1px dotted black;
margin-top: 30px;
margin-bottom: 30px;
}
.container h1 {
color: #acf37f;
}
.container h1,
.container h2 {
color: #acf37f;
}
div > h4 {
color: #ff5e36;
}
#colosseo-pic:hover {
border: 3px solid yellow;
width: 100%;
}
#menu {
text-align: center;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
display: inline-block;
padding: 10px;
}
.container > * {
width: 100%;
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
Conclusione
Con questo articolo abbiamo scoperto delle parti più avanzate del CSS. Abbiamo fatto una breve introduzione al Responsive Design, la combinazione di selettori, il Box Model, le Pseudo Classi e la creazione di un menù.
Ovviamente non abbiamo approfondito nessuno di questi argomenti a fondo e questo è voluto perchè credo che sia importante scoprire un argomento e sapere che esiste per poi approfondirlo in seguito.
"Non si conosce quello che non si sa che esiste finchè non scopri che esiste" o come direbbero gli Inglesi "You don't know what you don't know until you know it", per questo voglio farti scoprire l'esistenza di questi argomenti e poi potrai approfondirli man mano che andrai avanti nel percorso della Programmazione magari anche iscrivendoti alla Newsletter della Domenica di gorgaTech e ricevere una notifica ogni qualvolta pubblico un articolo di approfondimento 🙂
Ora preparati alla prossima lezione dove andremo a vedere per la prima volta JavaScript ed inizieremo un nuovo progetto!! Stay tuned 🙌