Il CSS controlla l’aspetto del tuo sito. Colori, caratteri, spaziature, layout: tutto è CSS. Scopri cos’è, come funziona e perché conta per il tuo brand.
Ti è mai capitato di visitare due siti con quasi gli stessi contenuti, ma con un aspetto completamente diverso? Uno è curato, pulito e facile da leggere. L’altro sembra disordinato, datato e difficile da esplorare. I contenuti possono essere identici. Ciò che li fa sembrare così diversi è il CSS.
Nel capitolo precedente hai visto che l’HTML dà struttura a una pagina web. Dice al browser cos’è ogni cosa: un titolo, un paragrafo, un’immagine, un pulsante. Ma l’HTML da solo non ha stile. Senza il CSS, ogni sito sembrerebbe un documento di testo semplice. Il CSS è ciò che trasforma quella struttura in un’esperienza visiva.
Cos’è il CSS?
CSS sta per Cascading Style Sheets, cioè fogli di stile a cascata. È un linguaggio che controlla la presentazione visiva di una pagina web. Mentre l’HTML dice "questo è un titolo", il CSS dice "questo titolo deve essere blu scuro, alto 32 pixel e usare questo carattere preciso". Mentre l’HTML dice "questo è un pulsante", il CSS dice "questo pulsante deve essere verde, avere gli angoli arrotondati e stare a 20 pixel dal testo sopra".
Ogni scelta visiva che vedi su un sito, come colori, caratteri, dimensioni, spaziature, layout, effetti al passaggio del mouse e sfondi, viene dal CSS. È il livello di design del web.
Come funziona il CSS?
Il CSS funziona prendendo di mira gli elementi HTML e applicando regole di stile. Dici al CSS quale elemento formattare e poi descrivi come deve apparire. Queste regole sono scritte in un file separato che il browser carica insieme all’HTML. Quando il browser legge insieme i due file, applica gli stili agli elementi corrispondenti e mostra la pagina finita.
La parte "a cascata" del nome si riferisce a come il CSS gestisce i conflitti. Se più regole di stile valgono per lo stesso elemento, il CSS segue un preciso ordine di priorità per decidere quale regola vince. Le regole più specifiche prevalgono su quelle più generali. Questo sistema dà ai designer un controllo preciso su come appare ogni elemento in tutto il sito.
Tipi di CSS
Il CSS si può scrivere in tre modi diversi. Funzionano tutti, ma non sono ugualmente adatti a ogni situazione.
1. CSS inline
Il CSS inline si scrive direttamente su un singolo elemento HTML. Riguarda solo quell’elemento e prevale su qualsiasi altro stile applicato. È utile per modifiche rapide e isolate, ma diventa un problema su larga scala. Se vuoi cambiare un colore usato in 50 elementi, devi modificarlo in 50 punti invece che in uno.
2. CSS interno
Il CSS interno si scrive dentro un tag style nel file HTML stesso, di solito in alto nella pagina. Vale solo per quella pagina. Va bene per pagine singole o piccoli progetti, ma per un sito intero significa ripetere gli stessi stili in ogni pagina. Cambi una cosa e devi aggiornare ogni file uno per uno.
3. CSS esterno
Il CSS esterno sta in un file separato collegato alle tue pagine HTML. È l’approccio standard per qualsiasi sito vero. Definisci tutti i tuoi stili una volta in un solo file e ogni pagina che lo collega li eredita. Cambi un colore o un carattere in un punto e si aggiorna ovunque all’istante. È più pulito, si carica più in fretta ed è molto più facile da mantenere. Quasi ogni sito costruito bene usa il CSS esterno come base.
Cosa controlla il CSS sul tuo sito
Il CSS tocca quasi ogni aspetto visivo del tuo sito. Ecco le aree principali di cui si occupa.
Colori e sfondi
Ogni colore del tuo sito, come il colore del testo, dello sfondo, dei pulsanti e dei bordi, si imposta con il CSS. I colori del tuo brand vengono applicati in modo coerente in tutto il sito definendoli una volta nel CSS e riutilizzandoli ovunque.
Tipografia
Il carattere che usa il tuo sito, la dimensione dei titoli e del testo, la spaziatura tra le righe, se il testo è in grassetto o in corsivo: tutto questo è CSS. Una buona tipografia rende i contenuti più facili da leggere e rafforza l’identità del tuo brand.
Layout e spaziature
Come sono disposte le colonne, quanto spazio c’è tra le sezioni, quanto è larga l’area dei contenuti, dove compare la barra laterale: il CSS controlla tutto. Le regole di layout definiscono la struttura generale di ogni pagina, oltre a ciò che offre l’HTML.
Comportamento responsive
Il CSS è anche ciò che fa funzionare il design responsive. Le media query nel CSS dicono al browser di applicare stili diversi a seconda della dimensione dello schermo. Su un desktop i contenuti possono comparire in tre colonne. Su un telefono, il CSS sistema quelle colonne in verticale, una sotto l’altra, così tutto sta nello schermo più piccolo.
Animazioni ed effetti
Gli effetti al passaggio del mouse sui pulsanti, le transizioni fluide tra le sezioni, le dissolvenze mentre i contenuti compaiono durante lo scorrimento: sono tutti CSS. Aggiungono movimento e cura all’esperienza senza bisogno di JavaScript.
Cosa significa per il tuo sito da titolare di un brand
Non serve scrivere CSS per avere un sito ben progettato. I creatori di siti lo gestiscono per te. Quando scegli un modello, i colori del tuo brand e i tuoi caratteri, la piattaforma traduce queste scelte in regole CSS dietro le quinte. Ogni modifica che fai nell’editor visivo produce CSS che il browser legge e applica.
Ciò che conta per te è che il CSS prodotto dalla tua piattaforma sia pulito ed efficiente. Un CSS pesante o gonfio rallenta il caricamento delle tue pagine. Un CSS scritto bene mantiene il tuo sito veloce e coerente su ogni pagina. Il creatore di siti di WEMASY genera in automatico un CSS ottimizzato, così le tue scelte di design si applicano in modo pulito senza aggiungere peso inutile alle pagine. Per capire come questo si collega alle prestazioni, leggi cos’è la velocità del sito e perché conta.
Domande frequenti
Devo imparare il CSS per creare un sito?
No. Un creatore di siti ti permette di controllare aspetto e stile del tuo sito con un editor visivo. La piattaforma scrive il CSS per te. Conoscere le basi del CSS è utile se vuoi capire perché le cose appaiono in un certo modo, ma non serve scriverne nemmeno una riga per creare un sito professionale con il creatore di siti di WEMASY.
Che differenza c’è tra CSS e HTML?
L’HTML definisce la struttura di una pagina web, cioè cos’è ogni pezzo di contenuto. Il CSS definisce come appare. L’HTML crea un titolo. Il CSS rende quel titolo di un certo colore, di una certa dimensione e con un certo carattere. Lavorano insieme: l’HTML fornisce gli elementi, il CSS li formatta.
Il CSS può influire sulla velocità del sito?
Sì. File CSS grandi e poco efficienti aggiungono peso a ogni caricamento di pagina. Un CSS non ottimizzato può anche impedire al browser di mostrare la pagina finché non ha finito di leggere tutti gli stili, e questo ritarda il momento in cui i visitatori vedono i tuoi contenuti. Un CSS pulito e minimo si carica più in fretta. È uno dei motivi per cui costruire su una piattaforma scritta bene conta per la velocità del sito.
Cos’è un framework CSS?
Un framework CSS è una raccolta di regole CSS già scritte che gli sviluppatori usano come punto di partenza invece di scrivere tutto da zero. Accelera lo sviluppo e offre fin da subito stili coerenti e collaudati. La maggior parte dei creatori di siti usa internamente un framework CSS, così i modelli che producono sono già ben strutturati e affidabili.
Si può usare il CSS per far apparire bene il sito sia su desktop sia su mobile?
Sì, ed è anzi uno dei compiti più importanti del CSS. Con le media query, il CSS applica stili diversi a seconda della dimensione dello schermo. Su un ampio schermo desktop i contenuti possono comparire in più colonne con immagini grandi. Su un telefono quelle stesse colonne si dispongono in verticale, le dimensioni dei caratteri si adattano e le spaziature si stringono per stare nello schermo più piccolo. Così funziona il design responsive, ed è tutto gestito dal CSS senza bisogno di una versione mobile separata del sito.
Cosa succede se il CSS non si carica in una pagina?
Se il file CSS non si carica, la pagina viene mostrata comunque, ma senza alcuno stile. Vedrai testo e immagini semplici, senza colori, caratteri o layout. Tutto sarà disposto in verticale nell’ordine in cui compare nell’HTML. Sembra rotto, ma tecnicamente i contenuti ci sono ancora. È raro sulle piattaforme ben mantenute, ma ricorda bene quanto lavoro visivo il CSS svolge in silenzio su ogni pagina.