Anteprima
Hai già la struttura HTML della tua pagina, ma sembra ancora spoglia, monocroma, priva di personalità? È qui che entra in gioco il CSS. Con un compilatore CSS online puoi scrivere le tue regole di stile e vedere immediatamente come trasformano la pagina, senza dover passare da un programma all'altro o ricaricare continuamente il browser.
L'editor CSS di Biadets è gratuito, immediato da usare e pensato per chi vuole lavorare in modo concreto sul design delle proprie pagine web. Che tu stia imparando a stilizzare i tuoi primi elementi o che tu abbia già esperienza e voglia testare qualcosa al volo, questo strumento fa al caso tuo.
CSS sta per Cascading Style Sheets, ovvero fogli di stile a cascata. È il linguaggio che si occupa di tutto ciò che riguarda l'aspetto visivo di una pagina web: i colori, i font, le dimensioni degli elementi, i margini, le animazioni, la disposizione dei blocchi.
Senza CSS, qualsiasi pagina web sarebbe una lista di testo nero su sfondo bianco, priva di gerarchia visiva e di qualsiasi attrattiva. L'HTML costruisce la struttura, ma è il CSS che la trasforma in qualcosa che le persone vogliono guardare e usare.
La cosa interessante del CSS è che separa nettamente il contenuto dalla presentazione. Puoi modificare completamente l'aspetto di una pagina senza toccare una sola riga di HTML. Puoi anche applicare lo stesso foglio di stile a pagine diverse, mantenendo una coerenza visiva su tutto il sito con il minimo sforzo. Se parti da zero, la lezione di Introduzione a CSS di Biadets è il posto giusto da cui cominciare.
L'interfaccia è divisa in due metà: a sinistra l'editor dove scrivi il codice CSS, a destra l'anteprima della pagina aggiornata in tempo reale. Non devi premere nessun tasto per applicare le modifiche, ogni riga che scrivi si riflette immediatamente nel risultato visivo.
In cima trovi le tre tab del progetto: index.html, style.css e script.js. Cliccando su style.css accedi all'editor CSS dedicato, dove puoi scrivere tutte le regole di stile che vuoi. Le modifiche che apporti al CSS si applicano immediatamente agli elementi HTML presenti nel file index.html, esattamente come succede in un progetto reale.
In basso è presente la Console, utile soprattutto quando lavori insieme a JavaScript, ma preziosa anche per capire se ci sono errori di caricamento legati a risorse esterne come font o immagini.
Il codice CSS è organizzato in regole, ognuna delle quali è composta da tre parti: un selettore, una o più proprietà e i rispettivi valori.
selettore{
proprietà: valore;
}Il selettore indica a quale elemento HTML si vuole applicare lo stile. La proprietà è l'aspetto visivo che si vuole modificare. Il valore è la specifica di come modificarlo.
Un esempio concreto: se vuoi che tutti i paragrafi della pagina abbiano il testo grigio scuro e una dimensione di 16 pixel, scrivi:
p{
color:#333333;
font-size:16px;
}Vale la pena capire subito anche dove inserire questo codice: all'interno di un file .css separato, dentro un tag <style> nell'HTML, oppure direttamente come attributo inline. Ognuno di questi approcci ha i suoi pro e contro, e la lezione su dove posizionare e inserire il CSS li spiega tutti in modo chiaro.
Uno degli aspetti più potenti del CSS è la flessibilità con cui puoi selezionare gli elementi da stilizzare. Non sei obbligato ad applicare lo stesso stile a tutti i tag dello stesso tipo, puoi essere molto preciso.
I selettori più usati sono:
h1 { } si applica a tutti i titoli <h1> della pagina..evidenziato { } si applica a qualsiasi elemento con class="evidenziato".#intestazione { } si applica solo all'elemento con id="intestazione".nav a { } si applica solo ai link che si trovano all'interno di un tag <nav>.h1, h2, h3 { } stilizza tutti e tre i livelli di titolo in una volta sola.Imparare a usare i selettori in modo efficace è uno dei passi più importanti per padroneggiare il CSS. Il corso di Biadets dedica lezioni specifiche sia ai tipi di selettori di base che ai selettori combinati, con esempi pratici da provare direttamente nell'editor.
Il CSS mette a disposizione centinaia di proprietà, ma alcune le utilizzerai praticamente in ogni progetto. Conoscerle bene ti permette di ottenere risultati visivi significativi anche con poche righe di codice.
Colori e sfondi
La proprietà color controlla il colore del testo, mentre background-color imposta il colore di sfondo di un elemento. Puoi usare nomi di colore in inglese (red, blue, white), codici esadecimali (#ff5733) o valori RGB (rgb(255, 87, 51)). Il CSS supporta diversi formati per esprimere i colori, ognuno con caratteristiche diverse: la lezione dedicata ai colori in CSS li illustra tutti.
body{
background-color:#f4f4f4;
color:#222222;
}Tipografia
Le proprietà tipografiche ti permettono di controllare ogni aspetto del testo: font-family per il carattere, font-size per la dimensione, font-weight per lo spessore, line-height per l'interlinea e text-align per l'allineamento. Puoi trovare una trattazione completa nella lezione sul font del testo e in quella sull'allineamento del testo.
h1{
ont-family:'Georgia', serif;
font-size:2rem;
font-weight: bold;
text-align: center;
}Box model: margini, padding e bordi
Ogni elemento HTML è un rettangolo. Il CSS gestisce lo spazio attorno e all'interno di questi rettangoli tramite tre proprietà fondamentali: margin (lo spazio esterno all'elemento), padding (lo spazio interno tra il contenuto e il bordo) e border (il bordo vero e proprio).
.card{
margin:20px;
padding:16px;
border:1px solid #cccccc;
}Capire il box model è essenziale per controllare il layout di una pagina. Il corso dedica lezioni separate a ciascuno di questi concetti: puoi approfondire i margini, il padding e i bordi ognuno nel suo contesto specifico.
Una delle funzionalità più affascinanti del CSS è la capacità di cambiare l'aspetto di un elemento in risposta a quello che fa l'utente, senza scrivere una sola riga di JavaScript. Questo è possibile grazie alle pseudo-classi.
La pseudo-classe più comune è :hover, che applica uno stile quando il mouse passa sopra a un elemento:
button:hover{
background-color:#0056b3;
cursor: pointer;
}Esistono molte altre pseudo-classi utili: :focus per gli elementi che hanno il focus da tastiera, :first-child e :last-child per selezionare il primo e l'ultimo figlio di un contenitore, :nth-child() per selezionare elementi in base alla loro posizione. La lezione sulle pseudo-classi in CSS le esplora tutte con esempi chiari.
Gli pseudo-elementi, invece, permettono di stilizzare parti specifiche di un elemento che non corrispondono a nessun tag HTML reale. ::before e ::after sono i più usati: consentono di inserire contenuto decorativo prima o dopo un elemento, gestito interamente dal CSS. Per capire come sfruttarli al meglio, la lezione sugli pseudo-elementi è il riferimento giusto.
Per molti anni, creare layout complessi in CSS è stato complicato e richiedeva trucchi poco eleganti. Con l'introduzione di Flexbox e CSS Grid, tutto è cambiato. Oggi puoi creare colonne, centrare elementi verticalmente e costruire griglie complesse con poche righe di codice pulito.
Flexbox è pensato per distribuire elementi lungo un asse, orizzontale o verticale. È perfetto per navbar, card affiancate, pulsanti allineati e layout che devono adattarsi alla dimensione del contenuto.
.contenitore{
display: flex;
justify-content: space-between;
align-items: center;
gap:16px;
}Il corso di Biadets dedica tre lezioni a questo argomento: una di introduzione al Flexbox, una sul flex container e una sui flex item, così da coprire ogni aspetto in modo progressivo.
CSS Grid è invece pensato per layout bidimensionali, dove hai bisogno di controllare sia righe che colonne. È ideale per strutturare intere pagine o sezioni complesse.
.griglia{
display: grid;
grid-template-columns:1fr2fr1fr;
gap:24px;
}Anche Grid ha la sua serie di lezioni dedicate: dall'introduzione al Grid al grid container, fino ai grid item. Puoi sperimentare entrambi i sistemi di layout direttamente nell'editor CSS, modificando i valori e osservando come cambia la disposizione degli elementi nell'anteprima.
Una delle funzionalità più pratiche del CSS moderno sono le custom properties, comunemente chiamate variabili CSS. Ti permettono di definire un valore una volta sola e riutilizzarlo in tutto il foglio di stile. Se poi vuoi cambiarlo, lo modifichi in un unico punto e la variazione si propaga ovunque.
Le variabili CSS si definiscono all'interno della pseudo-classe :root e si usano con la funzione var():
:root{
--colore-primario:#3a86ff;
--font-principale:'Inter', sans-serif;
--raggio-bordo:8px;
}
button{
background-color:var(--colore-primario);
font-family:var(--font-principale);
border-radius:var(--raggio-bordo);
}Questo approccio rende il codice CSS molto più manutenibile, soprattutto nei progetti di medie e grandi dimensioni. È anche il modo con cui si implementano i temi chiari e scuri senza duplicare l'intero foglio di stile. Puoi trovare una spiegazione dettagliata nella lezione dedicata alle variabili e alla funzione var().
Il CSS non serve solo a definire come appaiono gli elementi in modo statico. Con le transizioni e le animazioni puoi aggiungere movimento e fluidità all'interfaccia, migliorando l'esperienza dell'utente in modo significativo.
Le transizioni permettono di far cambiare uno stile in modo graduale invece che immediato. Bastano poche righe per rendere un cambio di colore o una trasformazione molto più piacevole da vedere:
button{
transition: background-color 0.3s ease;
}Le animazioni CSS, invece, ti danno un controllo molto più fine sul movimento, permettendoti di definire fotogrammi chiave (@keyframes) e di orchestrare sequenze complesse. Il corso dedica lezioni specifiche sia alle transizioni che alle animazioni, oltre a coprire le trasformazioni 2D e 3D che spesso si usano in combinazione.
Oggi le pagine web vengono visitate da schermi di dimensioni molto diverse: smartphone, tablet, laptop, monitor da gaming. Un buon foglio di stile deve funzionare bene su tutti questi dispositivi, e le media query sono lo strumento CSS che lo rende possibile.
Una media query ti permette di applicare determinate regole CSS solo quando certe condizioni sono soddisfatte, come una larghezza minima o massima dello schermo:
@media(max-width:768px){
.contenitore{
flex-direction: column;
}
}In questo esempio, quando la larghezza dello schermo è inferiore a 768 pixel, tipicamente uno smartphone, gli elementi del contenitore vengono impilati verticalmente invece di essere affiancati. Puoi testare gli effetti delle media query direttamente nell'editor ridimensionando la finestra di anteprima. La lezione su pagine responsive e media query approfondisce tutte le tecniche per costruire layout che si adattano a qualsiasi schermo.
Come tutti gli strumenti di Biadets, il compilatore CSS è completamente gratuito. Non ci sono funzionalità riservate agli utenti premium, non ci sono limiti di utilizzo e non è richiesta alcuna registrazione. Apri la pagina, scrivi il tuo codice CSS e lavora quanto vuoi.
È uno strumento pensato per tutti: per gli studenti che seguono un corso e vogliono mettere in pratica quello che hanno appena imparato, per i designer che vogliono tradurre rapidamente un'idea visiva in codice, per gli sviluppatori che hanno bisogno di isolare e testare un problema di stile senza aprire l'intero progetto.
Se vuoi imparare il CSS in modo strutturato, il corso di Biadets copre il linguaggio dall'inizio alla fine, con 48 lezioni organizzate per argomento. Si parte dalle fondamenta, sintassi, selettori, unità di misura, per arrivare a temi avanzati come le animazioni, Flexbox e Grid.
Il modo più efficace di studiare è alternare la lettura delle lezioni con la pratica nell'editor. Leggi come funziona una proprietà, scrivila nell'editor CSS, modificane i valori, osserva cosa cambia. Questo ciclo di lettura, scrittura e osservazione è quello che consolida davvero la conoscenza e la trasforma in competenza concreta.
Il codice CSS diventa intuitivo solo con la pratica. E un editor online gratuito, sempre disponibile e senza nessuna complicazione tecnica, è l'ambiente migliore in cui fare quella pratica.