CSS Cheat Sheet
Ultimo aggiornamento
Selettori
Come selezionare gli elementi a cui vuoi dare stile.
| Selettore | Seleziona |
|---|---|
* | Tutti gli elementi |
p | Tutti gli elementi <p> (per tag) |
.btn | Elementi con class="btn" |
#main | L'elemento con id="main" |
div p | Tutti i <p> dentro un <div> (discendenti) |
div > p | Solo i figli diretti |
a:hover | Link sotto il cursore (pseudo-classe) |
li:first-child | Il primo <li> del suo genitore |
li:nth-child(2n) | Ogni <li> pari |
input[type="text"] | Input con quell'attributo |
p::before | Contenuto generato prima di <p> (pseudo-elemento) |
Box model
Ogni elemento è un box: contenuto, padding, bordo, margine.
| Proprietà | Cosa fa |
|---|---|
width / height | Dimensione del box del contenuto |
padding | Spazio dentro il bordo |
border | 1px solid #333: spessore, stile, colore |
margin | Spazio fuori dal bordo |
box-sizing: border-box | Fa includere padding e bordo nella larghezza |
margin: 0 auto | Centra orizzontalmente un elemento block |
overflow: hidden | Taglia il contenuto che esce dal box |
Tipografia e colori
| Proprietà | Esempio |
|---|---|
color | color: #333: colore del testo |
background | background: #fff o un'immagine/gradiente |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (oppure rem, em) |
font-weight | 400 (normale) … 700 (grassetto) |
line-height | 1.5: spazio tra le righe |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
Layout monodimensionale, su righe o colonne. Imposta display: flex sul genitore.
| Proprietà (sul contenitore) | Cosa fa |
|---|---|
display: flex | Trasforma i figli in elementi flex |
flex-direction | row (predefinito) o column |
justify-content | Allinea lungo l'asse principale (center, space-between) |
align-items | Allinea lungo l'asse trasversale (center, stretch) |
gap | Spazio tra gli elementi, ad esempio gap: 16px |
flex-wrap | wrap manda gli elementi a capo su nuove righe |
flex: 1 (su un figlio) | L'elemento si allarga per riempire lo spazio disponibile |
Grid
Layout bidimensionale. Imposta display: grid sul genitore.
| Proprietà | Cosa fa |
|---|---|
display: grid | Trasforma i figli in elementi della griglia |
grid-template-columns | 1fr 1fr 1fr o repeat(3, 1fr) |
grid-template-rows | Definisce l'altezza delle righe |
gap | Spazio tra righe e colonne |
grid-column | 1 / 3: estende un elemento su più colonne |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) per griglie responsive |
place-items: center | Centra ogni elemento nella sua cella |
Posizionamento e display
| Proprietà / valore | Cosa fa |
|---|---|
position: static | Predefinito: nel flusso normale |
position: relative | Spostato rispetto alla sua posizione normale |
position: absolute | Posizionato rispetto all'antenato posizionato più vicino |
position: fixed | Fissato al viewport |
position: sticky | Resta fisso quando lo scroll raggiunge una soglia |
top / right / bottom / left | Offset per gli elementi posizionati |
z-index | Ordine di sovrapposizione (più alto = sopra) |
display: none | Rimuove l'elemento dal layout |
display: inline-block | Scorre inline ma accetta larghezza/altezza |
Transizioni e trasformazioni
| Proprietà | Esempio |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0): sposta |
transform: scale | scale(1.1): ridimensiona |
transform: rotate | rotate(45deg) |
opacity | 0 (invisibile) … 1 (opaco) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px: angoli arrotondati |
Unità e design responsive
| Unità / funzionalità | Significato |
|---|---|
px | Pixel assoluti |
% | Relativo al genitore |
rem | Relativo alla dimensione del font della radice |
em | Relativo alla dimensione del font corrente |
vw / vh | 1% della larghezza / altezza del viewport |
fr | Frazione dello spazio libero (grid) |
@media (max-width: 600px) { … } | Applica le regole sotto un breakpoint |
Selettori, box model, flexbox, grid e le proprietà che dimentichi sempre, in una sola pagina. Questa cheat sheet di CSS è un riferimento rapido per dare stile e impaginare le pagine web, da come selezionare gli elementi a come centrarli.
Tutto quello che trovi qui è CSS standard che funziona nei browser moderni. Copia una regola oppure provala dal vivo nel playground HTML, dove puoi modificare il CSS con un'anteprima immediata. Abbinala alla cheat sheet di HTML per il markup, oppure impara il layout da zero con il corso interattivo gratuito di CSS di Coddy.
Domande frequenti sulla cheat sheet di CSS
Questa cheat sheet di CSS è gratuita?
Sì. Questa cheat sheet di CSS è gratuita e non richiede registrazione. Salvala nei preferiti e usala ogni volta che devi controllare un selettore, una proprietà o uno schema di layout.
Meglio flexbox o grid?
Usa flexbox per i layout monodimensionali: una fila di pulsanti, una barra di navigazione, elementi su una sola riga o colonna. Usa grid per i layout bidimensionali in cui controlli righe e colonne insieme, come il layout di una pagina o una galleria di card. Funzionano bene insieme: capita spesso di avere una griglia di card in cui ogni card usa flexbox al suo interno.
Come si centra un div con il CSS?
display: flex; justify-content: center; align-items: center; centra un figlio sia in orizzontale sia in verticale. Per centrare solo in orizzontale un elemento block con una larghezza impostata, margin: 0 auto funziona ancora.Posso esercitarmi con il CSS online?
Sì. Apri il playground HTML per scrivere HTML e CSS insieme con un'anteprima dal vivo. Quando vuoi un percorso strutturato, il corso interattivo gratuito di CSS di Coddy copre selettori, box model, flexbox e grid passo dopo passo.
Questa cheat sheet va bene per chi inizia?
Sì. Parte da selettori e box model (le basi) per arrivare a flexbox, grid e transizioni, così puoi cominciare dalle prime sezioni e arrivare con il tempo al layout moderno.
Risorse correlate
Altre cheat sheet
