CSS Per Principianti
11 febbraio 2023
📖 13 min read

CSS Per Principianti

Emanuele Gorga
Emanuele Gorga
Ultimo aggiornamento 07 giugno 2023

Indice dei contenuti

  1. Introduzione
  2. Che cosa è il CSS
  3. La regola di base del CSS
  4. Aggiungere CSS al nostro codice HTML
  5. Il metodo Internal
  6. Le classi e gli ID CSS
  7. Introduzione al modello a cascata di CSS
  8. Il metodo external
  9. Conclusione
Corso completo Web Developer - Parte 2 - 2.2

Introduzione

In questa lezione andremo a vedere cosa è il CSS e come funziona. Inizieremo a conoscere i selettori e le proprietà più importanti. Inoltre, capiremo il perchè del CSS e come funziona il modello a cascata. Capiremo perchè aggiungere CSS al nostro codice HTML può essere paragonato ad andare dall'estetista.

Prima di continuare ti consiglio vivamente di seguire le lezioni precedenti di HTML perchè strettamente collegate fra di loro infatti in questa lezione andremo a vedere come aggiungere CSS al nostro codice HTML.

La base di HTML su cui andremo a lavorare è questa:

<!DOCTYPE html>
<html>
  <head>
    <title>Colosseo</title>
  </head>
  <body>
    <div>
      <h1>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>
      <h4>I principali luoghi di interesse vicino al Colosseo</h4>
      <ul>
        <li>Foro Romano</li>
        <li>Pantheon</li>
        <li>Piazza Navona</li>
      </ul>
      <img 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>

Questo è come viene visualizzato nel Browser

Ti ricordo che puoi utilizzare l'estensione Live Server per visualizzare il tuo codice HTML in tempo reale.

Che cosa è il CSS

Il CSS è un linguaggio di stile che ci permette di personalizzare il nostro sito web. Il CSS ci permette di modificare il colore del testo, il colore di sfondo, la dimensione del testo, la dimensione degli elementi, la posizione degli elementi, ecc. Insomma il CSS ci permette di modificare l'aspetto del nostro sito web come se un sito web andasse dall'estetista a farsi più bello e più attraente per gli utenti che lo visitano 🫦 💄

La regola di base del CSS

Ogni qualvolta vorrai applicare codice CSS ad un elemento HTML per dargli un aspetto diverso, dovrai scrivere una regola CSS. Una regola CSS è composta da un selettore e da una serie di proprietà e valori. Il selettore è l'elemento HTML che vuoi modificare, le proprietà sono le caratteristiche che vuoi modificare e i valori sono i valori che vuoi assegnare alle proprietà.

selettore {
  proprietà: valore;
}

Aggiungere CSS al nostro codice HTML

Per aggiungere CSS al nostro codice HTML possiamo utilizzare diversi metodi:

  • internal - aggiungere il codice CSS all'interno del tag <style> all'interno del tag <head> del nostro codice HTML
  • inline - aggiungere il codice CSS all'interno del tag HTML che vogliamo modificare
  • external - aggiungere il codice CSS all'interno di un file esterno con estensione .css e collegarlo al nostro codice HTML tramite il tag <link> all'interno del tag <head> del nostro codice HTML

Il metodo internal

<head>
  <title>Colosseo</title>
  <style>
    /* qui andremo a scrivere il nostro codice CSS */
  </style>
</head>

Ora applichiamo dello stile al nostro codice HTML del sito web del Colosseo. Aggiungi il seguente codice subito sotto al tag title:

<style>
  body {
    background-color: #8f7878;
  }
</style>

Se ricarichi la pagina del tuo sito web, vedrai che il colore di sfondo del tuo sito web è cambiato. Questo perchè abbiamo applicato il colore di sfondo #8f7878 al tag body del nostro codice HTML.

Proviamo ad aggiungere uno stile al tag h1 del nostro codice HTML. Aggiungi il seguente codice subito sotto al tag style:

<style>
  body {
    background-color: #8f7878;
  }

  h1 {
    color: #edf75a;
  }
</style>

Se ricarichi la pagina del tuo sito web, vedrai che il colore del testo del tag h1 è cambiato. Questo perchè abbiamo applicato il colore #edf75a al tag h1 del nostro codice HTML. Inizia ad essere leggermente più carino, no? 🤩

A volte possiamo trovarci con la necessità di applicare lo stesso stile a più elementi HTML. Per esempio, se volessimo applicare lo stesso colore di testo a più elementi HTML, dovremmo scrivere lo stesso codice CSS per ogni elemento HTML. Questo non è molto efficiente e non è molto pratico. Inoltre, possiamo ritrovarci in situazioni dove abbiamo bisogno di dare precedenza ad una proprietà CSS rispetto ad un'altra. Per esempio, se volessimo che tutti i nostri h1 hanno di default il colore #edf75a ma che un h1 specifico abbia il colore #000000, come possiamo fare? Possiamo utilizzare le classi CSS. Le classi CSS ci permettono di creare un gruppo di elementi HTML e di applicare lo stesso stile a tutti gli elementi HTML di quel gruppo. Inoltre, possiamo dare precedenza ad un elemento HTML rispetto ad un altro. Oltre alle classi abbiamo anche gli ID che servono da selettori ancora più specifici rispetto alle classi. Vediamo come fare.

Le classi e gli ID CSS

Prima di proseguire voglio consigliarti di testare anche sul tuo computer man mano che vai avanti con i passaggi, di ricaricare la pagina e di guardare che cosa succede. Questo ti aiuterà a capire meglio cosa succede e ti aiuterà a capire meglio il funzionamento del CSS. Per capire e memorizzare un nuovo concetto occorre ripeterlo più volte e fare pratica. Non preccouparti quindi, abbi fede e fai pratica. Con il tempo diventerà tutti più semplice e più divertente 🙂

Ora aggiungiamo una classe CSS al nostro codice HTML. Aggiungi il seguente codice subito sotto al tag h1:

<h1 className="titolo">Colosseo</h1>

Ora aggiungiamo lo stile alla nostra classe CSS. Aggiungi il seguente codice subito sotto al tag h1:

<style>
  body {
    background-color: #8f7878;
  }

  h1 {
    color: #edf75a;
  }

  .titolo {
    color: green; // questo colore ha la precedenza su quello del tag h1. Inoltre nota come puoi anche usare il nome di un colore invece del codice esadecimale che serve per dare più specificità al colore
  }
</style>

Il selettore ID è molto simile al selettore di classe, ma è ancora più specifico. Un selettore ID può essere utilizzato solo una volta in un documento HTML. Un selettore di classe può essere utilizzato più volte in un documento HTML. Un selettore ID è preceduto da un simbolo di cancelletto #, mentre un selettore di classe è preceduto da un punto .. Aggiungi il seguente codice subito sotto al tag h1:

<h1 className="titolo" id="titolo-principale">Colosseo</h1>

Ora aggiungiamo lo stile all'ID CSS. Aggiungi il seguente codice subito sotto al tag h1:

<style>
  body {
    background-color: #8f7878;
  }

  h1 {
    color: #edf75a;
  }

  .titolo {
    color: green;
  }

  #titolo-principale {
    color: beige; // questo colore ha la precedenza su quello del tag h1 e quello della classe .titolo.
  }
</style>

Come hai potuto vedere lo stile che viene applicato è quello dell'ID, ovvero il più specifico tra tutti.

Esempio completo

<!DOCTYPE html>
<html>
  <head>
    <title>Colosseo</title>
    <style>
      body {
        background-color: #8f7878;
      }

      h1 {
        color: #edf75a;
      }

      .titolo {
        color: green;
      }

      #titolo-principale {
        color: beige;
      }
    </style>
  </head>
  <body>
    <div>
      <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>
      <h4>I principali luoghi di interesse vicino al Colosseo</h4>
      <ul>
        <li>Foro Romano</li>
        <li>Pantheon</li>
        <li>Piazza Navona</li>
      </ul>
      <img 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>

Questo è come viene visualizzato nel Browser

Introduzione al modello a cascata di CSS

Il modello a cascata è il modo in cui il browser applica le regole CSS al nostro sito web. Questo viene applicato alle regole CSS seguendo semplicemente un ordine dall'alto verso il basso e applicando tutto ciò che trova scritto al nostro sito web. Il modello a cascata è fondamentale per capire come funziona il CSS e come funziona il browser.

Assegniamo un colore all'elemento h4 e subito dopo assegniamoci un colore diverso. Ti ricordo che l'elemento h4 nel nostro sito web contiene il testo I principali luoghi di interesse vicino al Colosseo. Vediamo cosa succede:

<style>
  h4 {
    color: beige;
  }

  h4 {
    color: green;
  }
</style>

Il colore che viene applicato è quello verde, perché il browser applica le regole CSS seguendo un ordine dall'alto verso il basso. Il colore rosso viene ignorato perché è stato scritto dopo il colore verde.

Questo è come viene visualizzato nel Browser

Il metodo external

Questo metodo è quello che vedrai spesso utilizzato dagli sviluppatori web. Ci permette di creare un file CSS esterno e di collegarlo al nostro file HTML. In questo modo possiamo avere un file HTML e un file CSS più pulito e infatti questo è il metodo che ti consiglio di utilizzare.

Passo 1

Crea un nuovo file CSS e chiamalo style.css. Dopodichè copia tutto ciò che hai scritto nel tag style del tuo file HTML e incollalo nel tuo file CSS.

Dovresti ritrovarti con un file style.css nella stessa cartella del tuo file index.html che contiene questo codice:

body {
  background-color: #8f7878;
}

h1 {
  color: #edf75a;
}

.titolo {
  color: green;
}

#titolo-principale {
  color: beige;
}

h4 {
  color: beige;
}

h4 {
  color: green;
}

Passo 2

Assicurati di cancellare tutto ciò che hai scritto nel tag style del tuo file HTML. Ora aggiungi il seguente codice subito dopo il tag title:

<link rel="stylesheet" href="style.css" />

Quindi dovresti avere un file HTML simile a questo:

<!DOCTYPE html>
<html>
  <head>
    <title>Colosseo</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <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>
      <h4>I principali luoghi di interesse vicino al Colosseo</h4>
      <ul>
        <li>Foro Romano</li>
        <li>Pantheon</li>
        <li>Piazza Navona</li>
      </ul>
      <img 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>

Se hai fatto tutto come ti ho detto, il tuo sito web dovrebbe essere esattamente lo stesso di prima.

Ora andiamo ad aggiungere qualche classe e qualche ID al codice HTML e dopodichè andremo ad aggiungere dello stile attraverso il codice CSS nel file style.css.

Aggiungi la classe container alle due div presenti nel tuo file HTML e aggiungi l'ID colosseo-pic al tag img:

<!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>

Ora aggiungi il seguente codice al tuo file CSS:

a {
  text-decoration: none;
  color: #ff5733;
  border-bottom: 2px solid #ff5733;
}

.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;
}

Il codice CSS che abbiamo aggiunto è il seguente:

  • a è un selettore che indica che stiamo modificando tutti i tag a presenti nel nostro file HTML. Abbiamo aggiunto un bordo sottostante al testo dei link e abbiamo cambiato il colore del testo dei link.
  • .container è un selettore che indica che stiamo modificando tutti i tag div che hanno la classe container nel nostro file HTML. Abbiamo impostato la larghezza del contenitore a 800px e abbiamo centrato il contenuto all'interno del contenitore.
  • #colosseo-pic è un selettore che indica che stiamo modificando il tag img che ha l'ID colosseo-pic nel nostro file HTML. Abbiamo impostato la larghezza dell'immagine a 500px e abbiamo aggiunto un bordo sottostante all'immagine.

Con le proprietà width, border e margin abbiamo impostato la larghezza, abbiamo aggiunto un bordo e abbiamo aggiunto un margine ai rispettivi elementi HTML.

Ora il tuo sito dovrebbe essere simile a questo:

Conclusione

Con questa prima lezione di CSS hai imparato le basi di CSS e hai già visto il modo ottimale per collegare dello stile CSS ad un file HTML utilizzando il metodo del file esterno. Complimenti! Datti una bella pacca sulla spalla. Man mano che andiamo avanti con il corso le lezioni si fanno sempre più interessanti e divertenti. 🥳 Nella prossima lezione andremo ad approfondire il mondo del CSS, vedremo che cos'è il Box Model, le pseudo classi e come combinare più selettori. 🤩