Documentazione CSS
Guida di riferimento a CSS concisa e ricca di esempi. Leggi il concetto, guarda il codice e poi mettilo in pratica in un percorso Coddy.
Inizia un percorso guidato di CSSPrimi passi
- CSS inlineIl CSS inline mette le dichiarazioni direttamente su un elemento con l'attributo style. Impara la sintassi, quando gli stili inline sono la scelta giusta, come vincono sui fogli di stile e come si confrontano con il CSS interno ed esterno.
- CSS esternoIl CSS esterno sta in un file .css che ogni pagina collega con <link rel="stylesheet">; il CSS interno sta in un elemento <style> dentro una pagina. Impara entrambi, come funzionano i percorsi dei file e quale regola vince quando si incontrano.
- CommentiIl CSS ha una sola sintassi per i commenti, /* ... */, per una riga o per più righe. Scopri dove possono stare i commenti, come commentare una regola e perché // e i commenti annidati rompono senza avvisi la regola successiva.
- !important!important fa vincere una dichiarazione sulle dichiarazioni normali, qualunque sia la loro specificità. Scopri esattamente cosa batte, cosa lo batte, come funziona la specificità sotto il cofano e i modi più puliti per vincere un conflitto di stili.
- Variabili CSSLe variabili CSS (custom properties) memorizzano un valore una volta e lo riutilizzano con var(). Impara a dichiararle in :root, a limitarne l'ambito e sovrascriverle, a dare un valore di fallback, a cambiare tema con JavaScript e a evitare la trappola del valore non valido.
Selettori
- SelettoriUn selettore CSS sceglie gli elementi a cui una regola applica lo stile. Impara tutti i tipi di selettore, i quattro combinatori (discendente, figlio, fratello adiacente, fratello generale), i selettori di attributo, il raggruppamento, e prova i selettori dal vivo.
- Selettore di classeIl selettore di classe (.nome) dà stile a tutti gli elementi con quella classe; il selettore ID (#nome) dà stile all'unico elemento con quell'id. Impara la sintassi, le classi multiple e concatenate, la differenza tra class e id, le regole per i nomi e come attivare e disattivare le classi con JavaScript.
- Pseudo-classiLe pseudo-classi selezionano gli elementi in base alla posizione o allo stato: :nth-child(), :first-child, :not(), :focus, :checked, :has() e altre. Impara la sintassi, la formula an+b con un tester dal vivo e la differenza tra nth-child e nth-of-type.
- ::before e ::after::before e ::after inseriscono contenuto generato come primo e ultimo figlio di un elemento, direttamente dal CSS. Impara la proprietà content, perché serve un content vuoto, come posizionarli, i tooltip con attr(), i contatori e dove non funzionano.
- HoverLa pseudo-classe :hover applica stili a un elemento mentre il puntatore ci passa sopra. Impara gli effetti hover per pulsanti e card, le transizioni fluide, i colori dei link con :link, :visited, :hover e :active nell'ordine giusto, e l'hover sugli schermi touch.
Box model
- Box modelOgni elemento è un box fatto di quattro strati: content, padding, border e margin. Scopri come ogni strato si somma alle dimensioni, come box-sizing: border-box cambia i calcoli, e guarda ogni strato misurato dal vivo.
- PaddingIl padding è lo spazio dentro un elemento, tra il suo contenuto e il suo bordo. Impara la forma abbreviata di padding con da 1 a 4 valori, le proprietà dei singoli lati, il padding logico, le percentuali e come il padding cambia la dimensione di un elemento.
- MarginIl margin è lo spazio trasparente fuori dal bordo di un elemento che allontana gli altri elementi. Impara la forma abbreviata di margin, come centrare con margin: 0 auto, i margini negativi, margin auto in flexbox e perché i margini verticali collassano.
- Margin vs PaddingIl padding è lo spazio dentro il bordo di un elemento; il margin è lo spazio fuori. Guardali entrambi sullo stesso riquadro, fianco a fianco e dal vivo, poi scopri quale usare per sfondi, aree cliccabili, spazio tra elementi e centratura.
- BordiLa proprietà border disegna una linea attorno al padding di un elemento. Impara la forma abbreviata border, tutti gli stili di bordo, i colori e i singoli lati, gli angoli arrotondati con border-radius e la differenza tra bordi e outline.
- Width e heightwidth e height impostano la dimensione del box di un elemento. Impara le dimensioni fisse e in percentuale, perché height: 100% spesso non fa nulla, min-height e max-width per layout flessibili, auto contro 100% e le parole chiave fit-content.
Testo e font
- Dimensione del fontLa proprietà font-size imposta quanto è grande il testo. Impara le unità che accetta (px, rem, em, %, parole chiave, vw), come cambiare la dimensione del testo in HTML, perché rem è la scelta sicura e come le dimensioni in em si moltiplicano.
- Font-weightLa proprietà font-weight rende il testo in grassetto, leggero o qualsiasi via di mezzo. Impara la scala numerica da 100 a 900, normal e bold, i relativi bolder e lighter, e perché a volte un peso non cambia nulla.
- Line Heightline-height imposta l'altezza di ogni riga di testo, e quindi lo spazio tra le righe. Scopri perché un numero senza unità è la scelta predefinita giusta, come i valori in px, em e % vengono ereditati in modo diverso, e i valori adatti per testo e titoli.
- Colore del testoIl tag <font color> è obsoleto; in HTML il colore del testo si imposta con la proprietà CSS color. Scopri come colorare una pagina intera, una sola parola, un link o un titolo, con colori con nome, hex e rgb, e come mantenere il testo leggibile.
- SottolineatoSottolinea il testo con text-decoration, poi controlla la linea: colore, stile, spessore e distanza dal testo. E anche come togliere la sottolineatura dai link, e quando non dovresti farlo.
- Text Shadowtext-shadow disegna una o più ombre dietro il testo. Impara i quattro valori (offset x, offset y, sfocatura, colore), come sovrapporre le ombre per effetti di bagliore, contorno e 3D, e come usare un'ombra per mantenere il testo leggibile su sfondi carichi.
Colori e sfondi
- ColoriTutti i modi per scrivere un colore in CSS: colori con nome, codici hex, rgb() e rgba(), hsl(), trasparenza con il canale alfa, currentColor e i più recenti oklch() e color-mix(). Ognuno con un esempio dal vivo e un convertitore.
- Colore di sfondobackground-color riempie di colore il box di un elemento. Scopri come impostare il colore di sfondo di un'intera pagina, di un div, di una riga di tabella o di una sola parola, come funziona la trasparenza, perché bgcolor è obsoleto e in cosa background-color differisce dalla forma abbreviata background.
- Immagine di sfondobackground-image mette un'immagine o un gradiente dietro il contenuto di un elemento. Impara url() e i gradienti, background-size (cover e contain), background-position, background-repeat, come sovrapporre più sfondi e la forma abbreviata background.
- GradientiI gradienti CSS sono immagini che il browser disegna a partire dai colori. Impara radial-gradient (forma, dimensione, posizione), linear-gradient (direzione e angoli), conic-gradient, i color stop, gli stop netti per le strisce, i gradienti ripetuti e il testo sfumato.
- Box-shadowbox-shadow disegna ombre attorno al box di un elemento. Impara i cinque valori (x, y, blur, spread, colore), le ombre inset, come sovrapporre più ombre per una profondità realistica, gli anelli di focus fatti con spread e gli errori che rendono le ombre sporche.
Layout
- DisplayLa proprietà display decide come un elemento partecipa al layout. Impara block, inline e inline-block con box misurati uno accanto all'altro, display none contro visibility hidden, e dove si collocano flex, grid, flow-root e contents.
- Positionposition: absolute mette un elemento in coordinate esatte dentro il suo antenato posizionato più vicino. Scopri come funziona absolute insieme a position: relative, poi fixed e sticky, le proprietà top/right/bottom/left e inset, e perché sticky a volte non si attacca.
- Z-index in CSSz-index decide quale elemento sovrapposto viene disegnato sopra. Impara su quali elementi funziona, come gli stacking context raggruppano gli elementi così che uno z-index di 9999 possa comunque perdere, cosa crea uno stacking context e come sistemare uno z-index che non funziona.
- Overflowoverflow decide cosa succede al contenuto che non entra nel suo riquadro: mostrarlo, tagliarlo o aggiungere le barre di scorrimento. Impara visible, hidden, scroll, auto e clip, overflow-x e overflow-y, l'ellissi nel testo e gli effetti collaterali di overflow sul layout.
- Float e clearfloat spinge un elemento su un lato e lascia che il testo gli scorra attorno, come fanno le riviste con le foto. Impara float left, right e inline-start, clear, perché un genitore collassa attorno ai float e come lo risolve display: flow-root, e perché i float non si usano più per il layout di pagina.
- Centrare un divTutti i modi per centrare un div in orizzontale, in verticale o in entrambe le direzioni: flexbox, grid, margin auto, posizione assoluta con transform, inset con margin auto e align-content. Ognuno gira dal vivo e misura il proprio centraggio, con una tabella su quando usare quale.
- Centrare un'immagineUn <img> è inline, quindi si centra come il testo: text-align: center sul genitore. Oppure rendilo un blocco con margin: 0 auto, o centralo con flexbox o grid, anche in verticale. Ogni metodo gira dal vivo e misura il risultato.
Flexbox e Grid
- FlexboxFlexbox dispone gli elementi in una riga o in una colonna e controlla come si dividono lo spazio e come si allineano. Impara display: flex, l'asse principale e quello trasversale, tutte le proprietà del contenitore, flex-grow, flex-shrink e flex-basis, con un playground dal vivo che misura dove finisce ogni elemento.
- Justify Contentjustify-content posiziona gli elementi flex lungo l'asse principale e align-items lungo l'asse trasversale. Guarda tutti i valori fianco a fianco, misurati, con una griglia di allineamento cliccabile, align-self e i motivi per cui justify-content a volte non fa niente.
- Flex wrapflex-wrap decide se gli elementi flex si stringono su una sola riga o passano alla successiva, e flex-direction decide se scorrono in riga o in colonna. Impara entrambi con esempi dal vivo, la forma abbreviata flex-flow, align-content e una fila di schede responsive senza media query.
- CSS GridCSS grid dispone gli elementi in righe e colonne insieme. Impara display: grid, grid-template-columns, l'unità fr, repeat() e minmax(), auto-fill contro auto-fit, come posizionare gli elementi con grid-column e grid-template-areas, con una griglia dal vivo da modificare e misurare.
Design responsive
- Media queryUna media query applica il CSS solo quando una condizione è vera, come una larghezza minima dello schermo, un tema scuro o un puntatore del mouse. Impara la sintassi di @media, i breakpoint mobile first, la sintassi a intervalli, prefers-color-scheme, matchMedia in JavaScript e le container query.
- Unità CSSrem è relativo alla dimensione del font della radice, em a quella dell'elemento stesso, px è fisso e % dipende dalla proprietà. Guarda ogni unità misurata in una demo annidata, perché em si moltiplica, quando usare l'una o l'altra e come funzionano vw, vh e dvh.
- clamp()clamp(MIN, PREFERRED, MAX) restituisce il valore preferito, ma mai meno di MIN né più di MAX. Scopri come rende fluide le dimensioni dei font e le spaziature senza media query, come calcolare il valore centrale e che rapporto hanno min() e max() con clamp().
- calc()calc() ti permette di fare calcoli in CSS e di mescolare unità, come il 100% meno una barra laterale fissa di 200px. Impara le regole di sintassi (gli spazi contano), calc() con le variabili CSS, i layout tipici che risolve e perché un calc() non valido viene ignorato senza avvisi.
Transizioni ed effetti
- TransitionUna transition CSS anima una proprietà dal vecchio al nuovo valore quando cambia, per esempio in hover. Impara la forma abbreviata di transition, tutte le funzioni di timing fianco a fianco, cosa si può animare e cosa no, il trucco per height: auto e il movimento ridotto.
- Animazioni CSSLe animazioni CSS portano un elemento attraverso i passaggi che definisci in @keyframes, da sole e tutte le volte che vuoi. Impara la sintassi di @keyframes, le otto proprietà di animation, fill-mode e direction, gli indicatori di caricamento, la pausa e come rispettare il movimento ridotto.
- TransformLa proprietà transform sposta, ridimensiona, ruota e inclina un elemento senza cambiare il layout intorno. Impara tutte le funzioni di trasformazione, perché l'ordine delle funzioni conta, transform-origin, le proprietà separate translate, scale e rotate, e il trucco translate(-50%, -50%) per centrare.
- RotateRuota un elemento con transform: rotate(45deg) o con la più recente proprietà rotate. Impara le unità degli angoli (deg, turn, rad), la rotazione attorno a un angolo con transform-origin, come ruotare testo e icone, un loader che gira e la rotazione 3D con rotateX e rotateY.
- Opacityopacity rende trasparente un intero elemento e tutto ciò che contiene, da 0 (invisibile) a 1 (pieno). Impara i valori, perché opacity sbiadisce anche il testo e come rendere trasparente solo lo sfondo, opacity: 0 contro visibility e display, e le dissolvenze in hover.
- Blur e filterfilter: blur(5px) sfoca un elemento, e backdrop-filter: blur() sfoca ciò che c'è dietro. Impara tutte le funzioni di filtro (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow) con cursori dal vivo, come combinarle e il problema dei bordi sfocati.
