CSS e Bootstrap

CSS

CSS (Cascading Style Sheet) è un linguaggio di markup (ma senza parentesi angolari) che definisce stile e layout di una pagina HTML. Questo linguaggio nasce per separare contenuto dalla sua presentazione, questo perché ciò consente sia di adattare il contenuto a dispositivi differenti (es. pc o smartphone) sia per permettere di dare un tema diverso alla stessa pagina (es. tema scuro o tema chiaro).

CSS interviene nello specifico in questi aspetti:

colori
font
margini
icone
layout degli elementi in pagina

Un CSS può essere definito sia nella pagina HTML (usando il tag <style>) sia con un documento separato (detto foglio di stile), pratica preferita per avere una corretta separazione.

Il foglio CSS è un documento di testo prevede una o più regole da applicare all’HTML a cui è associato, nella forma:

regola1 {
  proprietà1: valore;
  proprietà2: valore;
}

regola2 {
...
}

...

Ad esempio:

body {
  background-color: black;
  color: white;
}

Questa regola dice che nel body lo sfondo deve essere nero e il testo bianco.

La regola è indicata tramite un selettore CSS, una stringa che identifica l’oggetto o gli oggetti della pagina per cui si definisce la regola. In particolare è possibile definire delle “classi” CSS che indicano un raggruppamento di proprietà che verranno applicate. Una classe è quindi un marcatore che associa un nome ad un gruppo di stili e viene associata a quei tag con attributo class=”nomeclasse”.

Vediamo ora i selettori più comuni:

* -> tutti gli elementi
element (es. div, h1, p, ecc.) -> seleziona tutti gli elementi con quel tag
.class (es. corpotesto, .header, ecc.) -> definisce una classe che sarà applicata a tutti gli elementi che la indicano
#id (“#titolo-pagina”) -> identifica l’elemento che ha id corrispondente

è possibile anche fare selezione multipla:

div .introduzione (seleziona tutti i div che hanno come classe introduzione)
div h1 (seleziona tutti i div e gli h1).

Qui un elenco di proprietà comuni degli elementi. Le proprietà CSS sono parecchie ne indichiamo le principali:

Testo

color → colore del testo
font-family → tipo di carattere
font-size → dimensione del testo
font-weight → spessore (es. normal, bold)
text-align → allineamento (left, center, right, justify)
text-decoration → sottolineato, barrato
line-height → altezza della riga
letter-spacing → spaziatura tra lettere
word-spacing → spaziatura tra parole

Colori

background-color → colore di sfondo
background-image → immagine di sfondo

Layout

width → larghezza
height → altezza
margin → margini esterni
padding → margini interni
border → bordo (stile, colore, spessore)
border-radius → angoli arrotondati
display → tipo di visualizzazione
- block: block occupa tutto lo spazio della pagina in larghezza e forza di andare a capo
- inline: occupa lo spazio necessario e non va a capo
- none: l’elemento viene nascosto
- flex: consente un allineamento dinamico in base alla pagina (sono poi presenti altre proprietà per descrivere il flusso, es flex-direction, flex-wrap e align-items).
position → posizionamento (static, relative, absolute, fixed, sticky)
top, right, bottom, left → offset posizione (di quanto si sposta rispetto alla posizione)
z-index → livello di sovrapposizione (di oggetti che occupano lo stesso spazio)
overflow → gestione contenuto traboccante (hidden, scroll, auto) per quei contenuti che superano la dimensione del contenitore (es. testo che scrolla)

Cosa significa Cascading

Per cascading si intende il fatto che una regola CSS non si applica solo all’elemento, ma anche a tutti gli elementi in esso contenuti. Ad esempio se un div contiene un altro div, anche il div contenuto eredita lo stesso stile CSS. Questo meccanismo permette di risparmiare codice e non dover fissare una regola per tutti gli elementi di una intera sezione del sito. E’ comunque possibile ad ogni livello definire regole specifiche per il singolo elemento. Ad esempio se vogliamo che un testo che sia scritto con un font tipo Arial ma i titoli in Verdana, daremo come regola del contenitore Arial e solo per i titoli font Verdana.

Qui una pagina riassuntiva completa di tutti i CSS: https://websitesetup.org/css3-cheat-sheet/. In questa pagina https://playcode.io/css si ha un utile strumento per testare html e css.

Bootstrap

Nei progetti più avanzati è quindi necessario scrivere fogli di stile per definire un layout completo delle pagine Web. E’ in generale compito dei grafici digitali, che dopo aver disegnato un layout con strumenti grafici (es. Figma) realizza anche il CSS corrispondente da applicare all’HTML.

Tuttavia questo corso è focalizzato alla programmazione Web e non alla grafica, quindi pur essendo necessaria una conoscenza di base di CSS, per realizzare le pagine Web necessarie allo sviluppo utilizzeremo un framework, per la precisione Bootstrap.

Cosa è un framework? Un framework, in informatica, è un tipo speciale di libreria che non solo offre delle funzionalità già pronte (un po’ come le librerie di altri linguaggi) ma che aiuta ad impostare un progetto o parte di esso secondo delle linee guida ben specifiche. Bootstrap nello specifico è un framework CSS (che contiene anche del Javascript per gestire le animazioni) che permette non solo di avere delle classi CSS già pronte , ma anche di aiutarci a darci un layout alla pagina flessibile per le nostre esigenze, senza quindi dover scrivere un nostro foglio di stile. Naturalmente il framework va studiato, anche se ha una difficoltà di apprendimento molto minore del CSS.

Bootstrap è il framework CSS più usato al mondo, è molto semplice da usare, e permette di ottenere rapidamente pagine ben leggibili, con strutture anche complesse su colonne e riquadri, con più temi e colori. Rispetta ottimi criteri di usabilità, leggibilità, sicurezza e accessibilità. Si stima che circa il 5% dei siti di tutto il mondo usino Bootstrap.

Lo svantaggio principale è che questi siti peccano di poca originalità, sono tutti abbastanza simili tra loro e con quelli esistenti. Un occhio esperto osserverà subito quando un sito web è fatto con Bootstrap. Ma questo per i nostri scopi non è un reale svantaggio in quanto il Web Design è fuori dagli scopi di questo corso. Imparare il CSS può essere però un utile approfondimento per chi interessato.

Caratteristiche di Bootstrap:

molte classi pronte all’uso
sistema di layout basato su griglia
design responsivo (automaticamente si adatta allo smartphone)
componenti pronti (come breadcrumb e finestre modali)
animazioni con JS pronte

Per utilizzare Bootstrap si rimanda alla documentazione ufficiale, sempre aggiornata, dove gli argomenti da imparare sono questi:

introduzione (https://getbootstrap.com/docs/5.2/getting-started/introduction/)

Dall’introduzione vediamo come inserire Bootstrap in una pagina HTML, ricopiamo qui il codice:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

tipografia (https://getbootstrap.com/docs/5.0/content/typography/)
immagini (https://getbootstrap.com/docs/5.0/content/images/)
tabelle (https://getbootstrap.com/docs/5.0/content/tables/)
forms (https://getbootstrap.com/docs/5.0/forms/overview/)

La parte più importante di Bootstrap è la gestione dei layout, con il suo grid system. Qui la guida di funzionamento:

Contenitore: https://getbootstrap.com/docs/5.2/layout/containers/
griglia: https://getbootstrap.com/docs/5.2/layout/grid/
colonne: https://getbootstrap.com/docs/5.2/layout/columns/

Il meccanismo di funzionamento è quello di suddividere il container (un div con classe “container”) in una griglia (non una tabella) dove ogni riga è poi soddivisa in un layout di colonne che possono occupare da 1 a 12 colonne, con qualsiasi configurazione. Nella lezione sulla griglia sono presenti diversi esempi. Con questo sistema è possibile quindi creare qualsiasi struttura di pagina web.

E’ importante capire che si possono applicare layout differenti che si attiveranno automaticamente in base al tipo di dispositivo. Vedremo qui sotto degli esempi di utilizzo del grid system.

Esempi

Di seguito alcuni esempi con Bootstrap. Alcune note:

(viene omessa la sezione head e i tag body e tutto quanto presente nella struttura dell’esempio sopra)
non sono state messe immagini reali, ma è stato utilizzato un servizio (https://placehold.co) che consente di inserire immagini fittizie che simulano gli ingombri di una vera immagine.
è anche possibile generare (come sarà richiesto negli esercizi) con testo fittizio usando risorse online come https://loremipsum.io/

E’ possibile testare questi esempi su VS Code oppure online su un editor online (come https://jsfiddle.net/).

Pagina personale

container ccon una riga e due colonne.
Nella colonna di sinistra ci sarà una foto profilo, nella colonna di destra testi con titolo, sottotitolo, breve biografia.
Infine un pulsante “contattami”.

<body>
  <div class="container py-5">
    <div class="row align-items-center">
      <div class="col-md-4 text-center mb-3 mb-md-0">
        <img src="https://via.placeholder.com/250" class="img-fluid rounded-circle" alt="Foto profilo">
      </div>
      <div class="col-md-8">
        <h1 class="display-5">Mario Rossi</h1>
        <h3 class="text-muted">Web Developer</h3>
        <p class="mt-3">Sono uno sviluppatore web appassionato di design e tecnologia. Amo creare applicazioni responsive e accessibili con HTML, CSS, Bootstrap e JavaScript.</p>
        <button class="btn btn-primary">Contattami</button>
      </div>
    </div>
  </div>
</body>

Homepage di un ristorante

Barra di navigazione (navbar) in cima con logo + link “Menu”, “Chi siamo”, “Prenotazioni”.
immagine grande di sfondo con titolo e sottotitolo centrati.
Sezione menu con cards per tre piatti, ogni card con immagine, titolo, descrizione, prezzo.
footer con contatti e icone social.

<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Bella Vita</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Chi siamo</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Prenotazioni</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <header class="bg-dark text-white text-center py-5" style="background: url('https://via.placeholder.com/1200x400') center/cover;">
    <div class="container">
      <h1 class="display-4 fw-bold">Benvenuti al Ristorante Bella Vita</h1>
      <p class="lead">Tradizione e gusto nel cuore della città</p>
      <a href="#" class="btn btn-primary btn-lg">Prenota un tavolo</a>
    </div>
  </header>

  <!-- Sezione Menu -->
  <section class="container py-5">
    <h2 class="text-center mb-4">I nostri piatti</h2>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Piatto 1">
          <div class="card-body">
            <h5 class="card-title">Pasta fresca</h5>
            <p class="card-text">Preparata con ingredienti genuini e ricette tradizionali.</p>
            <p class="fw-bold">€12</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Piatto 2">
          <div class="card-body">
            <h5 class="card-title">Pizza margherita</h5>
            <p class="card-text">Cotta nel forno a legna con mozzarella di bufala.</p>
            <p class="fw-bold">€9</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Piatto 3">
          <div class="card-body">
            <h5 class="card-title">Tiramisù</h5>
            <p class="card-text">Il nostro dolce fatto in casa più richiesto.</p>
            <p class="fw-bold">€6</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-dark text-white text-center py-3">
    <p>© 2025 Ristorante Bella Vita - Seguici sui social</p>
  </footer>
  
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

Portfolio di un fotografo

Griglia (grid system) con 3 colonne su desktop, 2 colonne su tablet, 1 colonna su smartphone, ogni elemento è un’immagine con didascalia.

  <div class="container py-5">
    <h1 class="text-center mb-4">Portfolio Fotografico</h1>

    <!-- Griglia immagini -->
    <div class="row g-4">
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">
          <img src="https://placehold.co/400x300" class="card-img-top" alt="Foto 1" data-bs-toggle="modal" data-bs-target="#foto1">
          <div class="card-body"><p class="card-text">Paesaggio al tramonto</p></div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">
          <img src="https://placehold.co/400x300" class="card-img-top" alt="Foto 2" data-bs-toggle="modal" data-bs-target="#foto2">
          <div class="card-body"><p class="card-text">Ritratto in studio</p></div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="card">
          <img src="https://placehold.co/400x300" class="card-img-top" alt="Foto 3" data-bs-toggle="modal" data-bs-target="#foto3">
          <div class="card-body"><p class="card-text">Scatto urbano</p></div>
        </div>
      </div>
    </div>
  </div>

Conclusioni

CSS è un linguaggio per definire lo stile di una pagina web, che comprende grafica, colori, font e soprattutto il layout degli elementi della pagina. Il CSS è un documento composto da regole che tramite selettori CSS definiscono classi e/o selezionano elementi per applicare un insieme di proprietà.

La libreria Bootstrap semplifica la realizzazione del layout e della grafica dei siti web con classi CSS già pronte e con un sistema di layout molto potente e semplice da utilizzare.

Home

Programmazione

Sviluppo del Software

C/C++

Java

HTML

Javascript

NodeJS

Esercizi di programmazione

Progettazione

Ciclo di vita del Software

Progettazione del software

Tecnologie

Sistemi operativi

Architetture degli elaboratori

Tecnologie Web

Intelligenza Artificiale

Esercizi di Tecnologie

Strumenti

Progetti Web

Strumenti web

Strumenti sviluppo

Introduzione all'Informatica