CSS: cos'è, come funziona e a cosa serve

pubblicato in Programmazione web
Pubblicato da Boolean
· 14/06/2021 · 9 minutes read

Da cosa sono composte le pagine web? Migliaia di righe di codice costruiscono i siti che conosciamo e usiamo tutti i giorni. Alla base di tutto c'è HTML, il linguaggio di markup che con i suoi <tag> permette di delineare la struttura della pagina, definendo come posizionare il contenuto come se fossero i mattoni di una casa. Ma ogni abitazione va poi resa unica: come si colorano i pulsanti? Come si sceglie il font giusto per i titoli? Come si possono spaziare correttamente gli elementi fra di loro?

Per fare questo c'è CSS. I "fogli di stile a cascata" permettono di personalizzare le pagine da un punto di vista estetico, intervenendo su ogni dettaglio delle stesse. CSS permette di separare il contenuto dalla sua visualizzazione, consentendo di cambiare il modo in cui appare senza modificare il contenuto stesso. Questi "fogli di stile" sono appunto regole che dicono al browser come gli elementi della pagina devono essere visualizzati, e sono "a cascata" perché viene rispettato un ordine se più regole vengono applicate allo stesso contenuto.

L'importanza di CSS è chiara: senza di lui il web avrebbe probabilmente una faccia decisamente più piatta e monotona. Per capire come si è evoluto Internet negli anni serve quindi sapere cos'è CSS, come funziona e perché è fondamentale impararlo se si vuole diventare sviluppatori web. Scopriamo quindi la sua storia e le sue caratteristiche in questo articolo - ma prima di farlo, scoprite tutta la storia di HTML per poter capire completamente ciò di cui stiamo parlando!

Cos'è CSS: la sua origine

Anche CSS, come HTML, affonda la sua origine nella tecnologia dei primi anni '90. Håkon Wium Lie è il suo creatore: ai tempi questo ricercatore norvegese, collega di Tim Berners-Lee al CERN di Ginevra, propose di creare fogli di stile - Cascading Style Sheets - adattabili al neonato HTML, per poter applicare concetti di design alle pagine web. I primi fogli di stile erano scritti all'interno del browser stesso: ciò significava che era il browser a decidere come i contenuti venissero visualizzati, ma questo creava enormi problemi di compatibilità. Serviva separare il più possibile i vari elementi, per assicurare che si potessero immaginare pagine graficamente complesse e adattabili ai vari dispositivi.

Dopo tante peripezie, nel 1996 CSS diventa uno standard ufficiale, anche se passarono ulteriori anni per avere un browser completamente compatibile con le specifiche. Erano i primi mesi del 2000 quando Internet Explorer 5.0 per Macintosh arrivò con un supporto completo al 99% per CSS1, ma curiosamente la versione Windows presentava problemi di compatibilità con alcuni degli elementi di stile. Questo portò in quegli anni a dover "sistemare in corsa" le specifiche di CSS, ma alcuni browser presentavano ancora problemi di visualizzazione.

CSS ha presentato problemi di adozione curiosamente per colpa di Internet Explorer stesso, che nelle versioni successive mostrava incompatibilità con molte delle caratteristiche di questo linguaggio. Questo significava che gli sviluppatori dovevano rendere compatibili le proprie pagine con il browser più diffuso al mondo (all'epoca) attraverso dei trucchetti che portavano a rendere la pagina parzialmente malfunzionante con altri programmi come Firefox o Opera. Ci sono voluti ulteriori anni - e il rilascio di nuove versioni di Internet Explorer - per riuscire a rendere CSS sempre più completo e compatibile.

CSS come funziona

Non c'è CSS senza HTML. Servono infatti i cosiddetti <tag> per poter costruire prima una struttura da poi personalizzare con i fogli di stile. La prima cosa da fare è quindi quella di definire come vogliamo posizionare il contenuto: titoli, paragrafi di testo, immagini e tutto il resto. Si crea una "bozza" della pagina piuttosto grezza per poi andare ad abbellirla, renderla omogenea e in linea con quello che si sta immaginando.

I tag hanno degli attributi: esiste quello per gli heading - cioè i titoli -, quello per i link, quello per inserire elenchi puntati - insomma, tag per tutto. Di base però questi tag hanno una rappresentazione standard, quindi nel foglio HTML (o in un file a parte) si possono scrivere delle regole che il browser poi interpreterà. Si può dire per esempio che tutti i titoli devono essere rossi, che le immagini vanno allineate a destra o che le tabelle non devono avere bordi. Regola dopo regola, la pagina viene abbellita e personalizzata secondo le nostre esigenze.

Serve però fare due cose: la prima, trovare uno spazio dove scrivere le regole, che siano dettate fin dall'inizio della pagina. La seconda, delimitare porzioni di codice, per evitare che tutto venga personalizzato nella stessa maniera. Senza queste delimitazioni, applicare regole diverse a porzioni di pagina sarebbe un problema. Per risolvere il primo punto, usiamo il tag <style>, che come suggerisce il nome ci permette di avere una zona dove andare a scrivere tutte le nostre personalizzazioni. Se queste sono tante, possiamo scriverle a parte in un foglio esterno, e dire alla pagina HTML dove pescarle. Per la seconda questione, c'è il tag <div>: una volta aperto viene creato un contenitore dove scrivere codice al quale assegnare poi una certa personalizzazione, valida soltanto per il contenuto del contenitore stesso. Facciamo un esempio e seguiamo il codice:

<html>
  <head>
    <style>
      .rosso {
        color: white;
        background-color: red;
        text-align: center;
      }
      .testo {
        color: black;
        text-align: left;
      }
      .azzurro {
        color: black;
        background-color: lightblue;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="rosso">
      <h1>Titolo della pagina</h1>
    </div>

    <div class="testo">
      <p>Prova di scrittura di un paragrafo di testo!</p>
    </div>

    <div class="azzurro">
      <p>Blocco di testo su sfondo azzurro con immagine</p>
      <img
        src="LINKIMMAGINE"
      />
    </div>
  </body>
</html>

Sembra ci sia tanta carne al fuoco, ma basta scorrere il codice riga per riga per capirne il significato: nella parte alta della pagina - il cosiddetto header - c'è un tag <style> dove sono racchiuse le regole di personalizzazione. Le classi di customizzazione si chiamano rosso, testo e azzurro, come i contenitori di contenuto nella seconda parte della pagina.

Per rosso abbiamo un testo bianco centrato su sfondo rosso. Per testo, un paragrafo classico allineato a sinistra. azzurro invece avrà testi neri e centrati su sfondo blu chiaro. Le regole sono definite, spostiamoci al contenuto: all'interno del <body>, il corpo della pagina, abbiamo tre container - <div> - con a loro volta del testo e anche una immagine. Una novità sta appunto nell'ultimo blocco: attraverso un tag <img> con un link al suo interno, possiamo far comparire la foto di una spiaggia (o di quello che ci pare). E attraverso il CSS avremmo potuto aggiungere ancora più regole di personalizzazione: ombre di sfondo, allineamenti, ridimensionamenti - si può fare tutto.

CSS perché a cascata

Ma quindi perché quelli del CSS sono fogli di stile... a cascata? Questo linguaggio ragiona su due concetti fondamentali: quello dell'ereditarietà e quello della specificità. Il primo significa che quando si assegna una regola di stile a un elemento della pagina, essa viene ripresa da tutti gli elementi presenti - esempio, se si imposta il tag <h1> per i titoli su rosso, tutti i titoli (per eredità) saranno a loro volta rossi. Questo velocizza molto la creazione di pagine, perché basterà creare la regola una sola volta per applicarla a tanti elementi contemporaneamente.

Ma cosa succede se a un certo punto si vuole un titolo rosso ma anche sottolineato? Qui ci aiuta la specificità. A quel titolo in particolare gli si può assegnare una classe, e scrivere la regola per farlo rosso e sottolineato. Quando il browser va a leggere il codice della pagina, cerca per ogni elemento la sua regola specifica, e se non la trova va ad applicare quella del "genitore" che viene quindi ereditata. Ma cosa succede nel caso di un conflitto, cioè se più regole di stile vengono applicate agli stessi elementi? In questo caso, come in matematica, c'è un ordine che viene seguito che si chiama appunto "cascata": alle varie regole viene assegnato un peso e sulla base di questo il browser determina chi vince. Generalmente, la regola applicata specificatamente a un elemento vince su quella ereditata.

Perché CSS non è un linguaggio di programmazione

Si può definire CSS un linguaggio di programmazione? La risposta è no: HTML e CSS sono linguaggi di markup, cioè metodi per assegnare delle caratteristiche funzionali ed estetiche. Queste caratteristiche sono già determinate dal browser che usiamo per navigare: significa che è il browser a decidere come vengono visualizzate. CSS non è un linguaggio di programmazione anche perché non si può usare per risolvere logiche o calcoli matematici, né è in grado di modificare dati o manipolare variabili. I linguaggi di programmazione per il web sono altri, per esempio JavaScript, mentre fuori dall'ambito web ce ne sono tantissimi, come C#, Swift, Java, Python e altri.

Come imparare CSS

CSS è un linguaggio di per sé piuttosto facile da comprendere, anche se può nascondere delle complessità. L'importante è affrontarlo parallelamente a HTML: i due linguaggi necessitano l'uno dell'altro, ed è fondamentale conoscerli entrambi per poter costruire pagine statiche. La cosa interessante è che non servono particolari programmi per poter scrivere codice, vi basta un qualsiasi editor di testo - ma se volete qualcosa di più completo ma sempre gratuito, potete usare Microsoft Visual Studio oppure Atom. Potete addirittura scrivere codice e vederne il risultato direttamente dal vostro browser web con codesandbox.io, un tool dove poter sperimentare tutto il codice che volete senza installare nulla.

Un altro consiglio che vi diamo è quello di capire come il codice costruisce le pagine che usate quotidianamente: per fare questo potete guardarne il codice sorgente. Fate clic destro su una qualsiasi pagina web (anche questa va benissimo) e scegliete la voce "Visualizza origine della pagina" - o una simile. Potrete leggere l'intero codice che sta dietro e che fa funzionare il tutto. In alternativa, usate uno strumento da veri sviluppatori: puntate un elemento, fate click destro e scegliete "Esamina". In questo modo potrete vedere il codice per quella specifica parte di codice, e "giocando" con la barra laterale potrete modificarlo in tempo reale: ovviamente nulla di quello che starete facendo avrà un effetto reale sul sito, ma potete usare questo comando per cambiare delle scritte, far sparire pezzi di pagina, modificare i colori e tanto altro.

Corso gratuito online di HTML e CSS

Se volete un corso gratuito che possa darvi una visione di insieme di HTML e CSS, vi consigliamo di iscrivervi a FundamentalsCamp di Boolean. Un camp gratuito di ben 15 ore di lezione - equivalenti alle prime due settimane del corso per diventare Full Stack Web Developer da 700 ore - dove un teacher Boolean vi insegnerà a costruire pagine in HTML e CSS, partendo totalmente da zero. Alla fine di questo percorso gratuito ne saprete a sufficienza da poter realizzare un finto canale YouTube, con tutta la struttura e la grafica necessaria. E se poi vi doveste appassionare al punto tale di voler studiare di più, prendi in considerazione l'idea di diventare un web developer!

Read next

Sofia, la teacher Boolean con la passione per l'insegnamento

Tenacia, intraprendenza e voglia di mettersi in gioco: quando la programmazione è donna.

Qui in Boolean pensiamo che la nostra storia sia l'insieme...

Boolean #booleanpeople 12/06/2020 · 3 minutes read