Guida CSS: Introduzione e Approfondimenti per Docenti di Informatica

Introduzione a CSS

CSS (Cascading Style Sheets) è un linguaggio di stile utilizzato per controllare l’aspetto e il layout delle pagine web scritte in HTML. CSS consente di separare il contenuto dalla presentazione, rendendo più semplice la gestione e la manutenzione del codice.

Collegare CSS a un Documento HTML

Ci sono tre modi principali per aggiungere CSS a un documento HTML:

  1. Stile Inline: Applicare stili direttamente agli elementi HTML con l’attributo style. 
    <p style="color: red;">Questo è un testo in rosso.</p>
  2. Stile Interno: Inserire il CSS all’interno di un tag <style> nell’elemento <head> del documento. 
    <head>
  <style>
    body {
      cursor: pointer;
    }
  </style>
</head>
  3. Stile Esterno: Collegare un foglio di stile esterno con il tag <link>. 
    <head>
  <link rel="stylesheet" href="stili.css">
</head>
    Utilizzare un file esterno (stili.css) è la pratica più comune, poiché consente di riutilizzare il codice e semplifica la gestione degli stili.

Sintassi di CSS

Un blocco CSS è formato da un selettore e da una serie di dichiarazioni racchiuse tra parentesi graffe.

selettore {
  proprietà: valore;
}

Esempio:

p {
  color: blue;
  font-size: 16px;
}

In questo esempio, il selettore p indica che tutte le etichette <p> avranno il colore del testo blu e una dimensione del carattere di 16 pixel.

Selettori CSS

I selettori permettono di scegliere quali elementi HTML stilizzare. I più comuni includono:

  • Selettore di Tipo: Si riferisce direttamente a un elemento HTML.

    h1 {
  color: green;
}

  • Selettore di Classe: Si riferisce a elementi che hanno un determinato attributo class.

    .intestazione {
  font-weight: bold;
}

    Per applicare una classe, utilizzare l’attributo class nell’HTML:

    <p class="intestazione">Questo è un paragrafo in grassetto.</p>

  • Selettore ID: Si riferisce a un elemento con un id specifico (deve essere univoco in tutto il documento).

    #introduzione {
  text-align: center;
}

    Esempio HTML:

    <div id="introduzione">Benvenuti al mio sito!</div>

  • Selettori Combinati: Permettono di stilizzare elementi in base a relazioni tra di essi.

    • Selettore Discendente: Stilizza gli elementi discendenti di un altro elemento. 
      div p {
  color: red;
}
      In questo caso, tutti i paragrafi all’interno di un elemento <div> saranno di colore rosso.
    • Selettore di Classe su un Elemento: Stilizza un elemento specifico con una classe. 
      div.intestazione {
  color: blue;
}
      In questo esempio, solo i <div> con la classe intestazione avranno il colore blu.

  • Selettori di Attributo: Consentono di selezionare elementi in base a un attributo specifico.

    input[type="text"] {
  border: 1px solid gray;
}

    In questo esempio, tutti gli <input> con type="text" avranno un bordo grigio.

  • Selettori a Gruppo: Consentono di applicare lo stesso stile a più elementi contemporaneamente.

    h1, h2, p {
  margin: 0;
}

    In questo esempio, tutti i tag <h1>, <h2> e <p> avranno margine 0.

  • Selettori Universali: Stilizza tutti gli elementi.

    * {
  box-sizing: border-box;
}

    Questo selettore si applica a tutti gli elementi della pagina.

Priorità degli Stili CSS

Quando ci sono stili duplicati, CSS segue una gerarchia di specificità per determinare quale stile applicare:

  1. Stile Inline: Gli stili definiti direttamente nell’attributo style di un elemento HTML hanno la priorità più alta. 
    <p style="color: red;">Questo testo sarà rosso</p>
  2. Selettori ID: Hanno la seconda priorità più alta. 
    #intro {
  color: blue;
}
  3. Selettori di Classe : Hanno la priorità successiva. 
    .paragrafo {
  color: green;
}
  4. Selettori di Tipo: Come gli elementi HTML (p, h1, etc.), hanno la priorità più bassa. 
    p {
  color: black;
}
  5. Importanza con !important: È possibile forzare uno stile utilizzando !important, che sovrascrive qualsiasi altro valore definito. 
    .blu {
  color: blue !important;
}

Applicare Più Classi a un Elemento

È possibile applicare più classi a un singolo elemento HTML separandole con uno spazio.

Esempio HTML:

<p class="classe1 classe2">Questo è un paragrafo con due classi.</p>

In questo caso entrambe le classi verranno applicate all’elemento:

.classe1 {
  color: red;
}

.classe2 {
  font-weight: bold;
}

In questo esempio, il paragrafo avrà il testo in rosso e in grassetto.

Proprietà CSS Comuni

CSS offre una vasta gamma di proprietà per personalizzare l’aspetto degli elementi. Ecco alcune delle più utilizzate:

  • Colore del Testo (color): 
    p {
  color: blue;
}
  • Dimensione del Carattere (font-size): 
    h1 {
  font-size: 24px;
}
  • Colore di Sfondo (background-color): 
    body {
  background-color: lightyellow;
}
  • Margini (margin) e Padding (padding):
    • margin controlla lo spazio esterno di un elemento.
    • padding controlla lo spazio interno di un elemento.
    div {
  margin: 20px;
  margin-top: 10px;
  padding: 15px;
}
  • Bordi (border): 
    p {
  border: 1px solid black;
}
    Questa dichiarazione applica un bordo nero, solido, di 1 pixel intorno ai paragrafi.

Il Modello di Box CSS

Modello di Box in css

Ogni elemento HTML può essere considerato come una scatola. Il modello di box comprende:

  • Contenuto: L’area dove si trova il testo o gli elementi figli.
  • Padding: Spazio tra il contenuto e il bordo. Aumentare il padding aumenta lo spazio interno dell’elemento, creando “cuscini” interni tra il contenuto e il bordo.
  • Bordo: Contorno dell’elemento. Può essere personalizzato con vari stili, colori e larghezze.
  • Margine: Spazio esterno che separa l’elemento dagli altri. Aumentare il margine aumenta lo spazio esterno tra l’elemento e gli altri elementi circostanti.

Esempio di come applicare queste proprietà:

div {
  width: 300px;
  padding: 10px;  /* Spazio interno tra il contenuto e il bordo */
  border: 2px solid black;  /* Bordo dell'elemento */
  margin: 20px;  /* Spazio esterno tra l'elemento e gli altri */
}
  • box-sizing: La proprietà box-sizing definisce come vengono calcolate le dimensioni totali dell’elemento. Usando box-sizing: border-box;, il padding e il bordo vengono inclusi nella larghezza totale dell’elemento.

Layout con CSS: Flexbox e Grid

Flexbox

Flexbox è un sistema di layout unidimensionale che permette di distribuire gli elementi in una riga o colonna.

Esempio:

.container {
  display: flex;
  justify-content: space-between;
}

In questo esempio, gli elementi all’interno di .container saranno distribuiti uniformemente con spazio tra di loro.

CSS Grid

CSS Grid è un sistema di layout bidimensionale che permette di creare layout complessi con righe e colonne.

Esempio:

grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Questo esempio crea una griglia con due colonne, la prima più stretta della seconda.

Buone Pratiche CSS

  1. Separare il CSS dall’HTML: Utilizzare fogli di stile esterni per mantenere il codice pulito e riutilizzabile.
  2. Utilizzare Nomi Significativi per Classi e ID: Usa nomi che descrivano la funzione o il contenuto dell’elemento, ad esempio .nav-bar o #footer.
  3. Evitare Inline CSS: Mantieni gli stili nel CSS separato per facilitare la manutenzione del codice.
  4. Ridurre la Specificità: Evita di creare selettori troppo specifici per rendere il CSS più facile da sovrascrivere e mantenere.

Risorse Consigliate