Introduzione al CSS Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile e la presentazione di documenti HTML. Permette di controllare colori, font, layout, spaziature e molto altro.Per...

Selettori Css di Base I selettori CSS permettono di identificare gli elementi HTML a cui applicare gli stili.Tipi di selettori baseSelettore di elemento: p { } - seleziona tutti i par...

Proprietà color e background Le proprietà color e background sono fondamentali per definire l'aspetto visivo degli elementi.Proprietà colorDefinisce il colore del testo:p { ...

Margin e Padding Margin e Padding controllano lo spazio intorno e dentro gli elementi.Differenza chiaveMargin: spazio ESTERNO all'elemento (tra elementi)...

Box Model CSS Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappresentato come un rettangolo.Componenti del Box ModelContent: il contenuto effettivo (...

Proprietà Border La proprietà border definisce il bordo degli elementi HTML.Sintassi completa.box { border-width: 2px; border-style: solid; border-color: #333; /* Shorthand */ border: 2px so...

Display: block, inline, inline-block La proprietà display determina come un elemento viene visualizzato nel flusso del documento.display: blockOccupa tutta la larghezza disponibileInizia su u...

Flexbox: introduzione Flexbox è un sistema di layout CSS che semplifica l'allineamento e la distribuzione degli elementi.Attivare Flexbox.container { display: flex; }Proprietà del...

Flexbox: justify-content La proprietà justify-content allinea gli elementi lungo l'asse principale (orizzontale di default).Valori disponibiliflex-start: elementi all'inizio (default)...

Flexbox: align-items La proprietà align-items allinea gli elementi lungo l'asse trasversale (verticale di default).Valori disponibilistretch: elementi si estendono (default)...

Flexbox: flex-grow, flex-shrink, flex-basis Le proprietà flex-grow, flex-shrink e flex-basis controllano come gli elementi flex si espandono o contraggono.flex-growDefinis...

CSS Grid: introduzione CSS Grid è un sistema di layout bidimensionale che permette di creare griglie complesse.Attivare Grid.container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 co...

CSS Grid: grid-template-areas La proprietà grid-template-areas permette di definire layout usando nomi descrittivi.Definire le aree.container { display: grid; grid-template-areas: "header header...

Position: static, relative, absolute, fixed La proprietà position definisce come un elemento è posizionato nel documento.position: static (default)Posizionamento normale nel flusso del documento.po...

Position: sticky position: sticky è un ibrido tra relative e fixed. L'elemento scorre normalmente fino a raggiungere una soglia, poi diventa fisso.Sintassi.sticky-header { position: sticky; top: ...

Z-index e Stacking Context La proprietà z-index controlla l'ordine di sovrapposizione degli elementi posizionati.Come funziona.back { z-index: 1; } .middle { z-index: 2; } .front { z-index: 3; } /*...

Width e Height Le proprietà width e height definiscono le dimensioni degli elementi.Unità di misurapx - pixel (fissi)% - percentuale del contenitore...

Font e tipografia Le proprietà CSS per la tipografia controllano l'aspetto del testo.Proprietà principalibody { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 40...

Text-align e Vertical-align Le proprietà di allineamento del testo permettono di controllare la posizione del contenuto.text-alignAllinea il testo orizzontalmente:.left { text-align: left; } .center { text-a...

Text-decoration e Text-transform Proprietà per decorare e trasformare il testo.text-decorationa { text-decoration: none; } /* Rimuove sottolineatura */ .underline { text-decoration: underline; } .strike { text-deco...

Pseudo-classi CSS Le pseudo-classi selezionano elementi in base al loro stato o posizione.Stati interattivia:hover { color: red; } /* Mouse sopra */ a:active { color: darkred; } /* Click in corso *...

Pseudo-elementi CSS Gli pseudo-elementi permettono di stilizzare parti specifiche di un elemento o aggiungere contenuto.::before e ::after.quote::before { content: "201C"; /* Virgolette aperte */ ...

Transizioni CSS Le transizioni CSS permettono di animare i cambiamenti delle proprietà in modo fluido.Sintassi.button { background: blue; transition: background 0.3s ease; } .button:hover { bac...

Animazioni CSS con @keyframes Le animazioni CSS permettono di creare movimenti complessi definendo stati intermedi.Definire l animazione@keyframes fadeIn { from { opacity: 0; } to { opacity: 1...

Transform: translate, rotate, scale La proprietà transform permette di modificare la forma e la posizione degli elementi.translate (spostamento).move { transform: translateX(100px); /* Sposta a de...

Media Queries e Responsive Design Le Media Queries permettono di applicare stili diversi in base alle caratteristiche del dispositivo.Sintassi base/* Mobile first */ .container { width: 100%; } @m...

Overflow: gestire contenuto eccedente La proprietà overflow definisce come gestire il contenuto che eccede le dimensioni del contenitore.Valori disponibili.box { overflow: visible; /* Default: con...

Opacity e visibilità Diverse proprietà CSS controllano la visibilità degli elementi.opacity.transparent { opacity: 0.5; /* 50% trasparente */ } .invisible { opacity: 0; /* Completamente trasparente ma occupa spaz...

Box-shadow e ombre La proprietà box-shadow aggiunge ombre agli elementi.Sintassi.card { box-shadow: 5px 5px 10px rgba(0,0,0,0.2); /* offset-x offset-y blur color */ }Ombra intern...

Gradient CSS: linear e radial I gradienti CSS creano transizioni fluide tra colori.Linear gradient.gradient { background: linear-gradient(to right, #ff6b6b, #4ecdc4); /* Direzioni: to right, to b...

Filter CSS: blur, grayscale, brightness La proprietà filter applica effetti grafici agli elementi.Filtri disponibili.blur { filter: blur(5px); } .grayscale { filter: grayscale(100%); } .brightness ...

Object-fit per Immagini Responsive La proprietà object-fit definisce come un elemento sostituito (img, video) si adatta al suo contenitore.Valori disponibili.image { width: 300px; height: 200px; ...

Cursor: stili del puntatore La proprietà cursor cambia l aspetto del puntatore del mouse.Cursori comuni.pointer { cursor: pointer; } /* Mano, link cliccabile */ .default { cursor: default; } /* Fre...

List-style per Elenchi Le proprietà list-style personalizzano l aspetto degli elenchi.list-style-typeul { list-style-type: disc; } /* Pallino pieno (default) */ ul { list-style-type: circle; } /* C...

Variabili CSS (Custom Properties) Le variabili CSS (Custom Properties) permettono di riutilizzare valori in tutto il foglio di stile.Definire variabili:root { --primary-color: #007bff; --secondar...

Calc() per calcoli dinamici La funzione calc() permette di eseguire calcoli matematici per definire valori CSS.Sintassi.sidebar { width: calc(100% - 250px); /* Larghezza meno sidebar fissa */ } ....

Clamp(), min() e max() Le funzioni clamp(), min() e max() creano valori responsive senza media queries.clamp(min, preferred, max)h1 { font-size: clamp(1.5rem, 4vw...

Aspect-ratio per Proporzioni Fisse La proprietà aspect-ratio mantiene le proporzioni di un elemento.Sintassi.video-container { aspect-ratio: 16 / 9; /* Proporzione video HD */ width: 100%; } .sq...

Gap per Spaziatura in Flex e Grid La proprietà gap definisce lo spazio tra elementi in container Flexbox e Grid.Sintassi.flex-container { display: flex; gap: 20px; /* Spazio uguale tra tutti gli ...

Selettori Avanzati Css I selettori avanzati permettono di targetizzare elementi con precisione.Selettori di attributo[type="text"] { } /* Attributo uguale */ [href^="https"] { } /* Inizia con */ [h...

Scroll-behavior e Scroll-snap Proprietà CSS per controllare il comportamento dello scroll.scroll-behaviorhtml { scroll-behavior: smooth; /* Scroll fluido per anchor link */ } /* Esempio link */ ...

Outline vs Border Differenze tra outline e border in CSS.BorderFa parte del box modelInfluenza le dimensioni dell elementoPuò avere border-radiusOutlin...

Writing-mode per Testo Verticale La proprietà writing-mode cambia la direzione del flusso del testo.Valori disponibili.vertical { writing-mode: vertical-rl; /* Verticale, destra a sinistra */ wri...

Contenuti Generati con Content La proprietà content genera contenuto tramite CSS (con ::before e ::after).Testo e simboli.required::after { content: " *"; color: red; } .external-link::after { ...

Backdrop-filter per Effetti Vetro La proprietà backdrop-filter applica filtri grafici allo sfondo dietro un elemento.Effetto glassmorphism.glass-card { background: rgba(255, 255, 255, 0.2); backd...

CSS per la stampa (@media print) Le media query print permettono di ottimizzare lo stile per la stampa.Base@media print { /* Nascondi elementi non necessari */ nav, footer, .sidebar, .ads { disp...

Accessibilità CSS: focus e contrasto Best practice CSS per rendere i siti accessibili.Focus visibile/* NON rimuovere mai outline senza alternativa */ :focus { outline: 2px solid #007bff; outline-...

Reset Css e Normalize I CSS Reset e Normalize uniformano gli stili di default tra browser.Reset minimale moderno*, *::before, *::after { box-sizing: border-box; margin: 0; paddi...

Unità di misura CSS: px, em, rem, vw, vh Guida completa alle unità di misura in CSS.Unità assolutepx - Pixel, fissopt - Punti (stampa)cm, ...

Debugging CSS: DevTools e tecniche Tecniche per debuggare problemi CSS.Browser DevToolsIspeziona elemento (F12 o click destro)Modifica stili in tempo realeVisualizza box model...