-
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.Perché usare CSS?Se...
-
I selettori CSS permettono di identificare gli elementi HTML a cui applicare gli stili.Tipi di selettori baseSelettore di elemento: p { } - seleziona tutti i paragrafiSelettor...
-
Le proprietà color e background sono fondamentali per definire l'aspetto visivo degli elementi.Proprietà colorDefinisce il colore del testo:p {
color: #333333; /* Esadecimale ...
-
Margin e Padding controllano lo spazio intorno e dentro gli elementi.Differenza chiaveMargin: spazio ESTERNO all'elemento (tra elementi)Padding: spaz...
-
Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappresentato come un rettangolo.Componenti del Box ModelContent: il contenuto effettivo (testo, immagini)...
-
La proprietà border definisce il bordo degli elementi HTML.Sintassi completa.box {
border-width: 2px;
border-style: solid;
border-color: #333;
/* Shorthand */
border: 2px solid #333;
}...
-
La proprietà display determina come un elemento viene visualizzato nel flusso del documento.display: blockOccupa tutta la larghezza disponibileInizia su una nuova rigaEsempi: div, p, h1-h6, s...
-
Flexbox è un sistema di layout CSS che semplifica l'allineamento e la distribuzione degli elementi.Attivare Flexbox.container {
display: flex;
}Proprietà del containerf...
-
La proprietà justify-content allinea gli elementi lungo l'asse principale (orizzontale di default).Valori disponibiliflex-start: elementi all'inizio (default)flex-end: elemen...
-
La proprietà align-items allinea gli elementi lungo l'asse trasversale (verticale di default).Valori disponibilistretch: elementi si estendono (default)flex-start: elementi i...
-
Le proprietà flex-grow, flex-shrink e flex-basis controllano come gli elementi flex si espandono o contraggono.flex-growDefinisce quanto un elemento può crescere rispetto agli altr...
-
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 colonne uguali */
grid-templat...
-
La proprietà grid-template-areas permette di definire layout usando nomi descrittivi.Definire le aree.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
...
-
La proprietà position definisce come un elemento è posizionato nel documento.position: static (default)Posizionamento normale nel flusso del documento.position: relativePosizionato relativamente all...
-
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: 0; /* Diventa fisso quan...
-
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; } /* Sopra a tutti */Re...
-
Le proprietà width e height definiscono le dimensioni degli elementi.Unità di misurapx - pixel (fissi)% - percentuale del contenitorevw/vh...
-
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: 400; /* normal=400, bold=7...
-
Le proprietà di allineamento del testo permettono di controllare la posizione del contenuto.text-alignAllinea il testo orizzontalmente:.left { text-align: left; }
.center { text-align: center; }
.right { text-align: ...
-
Proprietà per decorare e trasformare il testo.text-decorationa { text-decoration: none; } /* Rimuove sottolineatura */
.underline { text-decoration: underline; }
.strike { text-decoration: line-through; }
.overline { text-d...
-
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 */
a:visited { color: p...
-
Gli pseudo-elementi permettono di stilizzare parti specifiche di un elemento o aggiungere contenuto.::before e ::after.quote::before {
content: "201C"; /* Virgolette aperte */
font-size: 2em;
}
.quote:...
-
Le transizioni CSS permettono di animare i cambiamenti delle proprietà in modo fluido.Sintassi.button {
background: blue;
transition: background 0.3s ease;
}
.button:hover {
background: darkblue;
}...
-
Le animazioni CSS permettono di creare movimenti complessi definendo stati intermedi.Definire l animazione@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Con percentuali */...
-
La proprietà transform permette di modificare la forma e la posizione degli elementi.translate (spostamento).move {
transform: translateX(100px); /* Sposta a destra */
transform: translateY(-50px); /*...
-
Le Media Queries permettono di applicare stili diversi in base alle caratteristiche del dispositivo.Sintassi base/* Mobile first */
.container { width: 100%; }
@media (min-width: 768px) {
.container { wi...
-
La proprietà overflow definisce come gestire il contenuto che eccede le dimensioni del contenitore.Valori disponibili.box {
overflow: visible; /* Default: contenuto visibile fuori */
overflow: hidden; ...
-
Diverse proprietà CSS controllano la visibilità degli elementi.opacity.transparent {
opacity: 0.5; /* 50% trasparente */
}
.invisible {
opacity: 0; /* Completamente trasparente ma occupa spazio */
}visi...
-
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 interna (inset)....
-
I gradienti CSS creano transizioni fluide tra colori.Linear gradient.gradient {
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
/* Direzioni: to right, to bottom, 45deg, etc. */
}
/* Con più c...
-
La proprietà filter applica effetti grafici agli elementi.Filtri disponibili.blur { filter: blur(5px); }
.grayscale { filter: grayscale(100%); }
.brightness { filter: brightness(1.2); } /* Più luminoso */
....
-
La proprietà object-fit definisce come un elemento sostituito (img, video) si adatta al suo contenitore.Valori disponibili.image {
width: 300px;
height: 200px;
object-fit: cover; /* Riempie, taglia...
-
La proprietà cursor cambia l aspetto del puntatore del mouse.Cursori comuni.pointer { cursor: pointer; } /* Mano, link cliccabile */
.default { cursor: default; } /* Freccia standard */
.text { curs...
-
Le proprietà list-style personalizzano l aspetto degli elenchi.list-style-typeul { list-style-type: disc; } /* Pallino pieno (default) */
ul { list-style-type: circle; } /* Cerchio vuoto */
ul { lis...
-
Le variabili CSS (Custom Properties) permettono di riutilizzare valori in tutto il foglio di stile.Definire variabili:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--spacing: 1rem;
--...
-
La funzione calc() permette di eseguire calcoli matematici per definire valori CSS.Sintassi.sidebar {
width: calc(100% - 250px); /* Larghezza meno sidebar fissa */
}
.container {
padding: calc(1rem + 2...
-
Le funzioni clamp(), min() e max() creano valori responsive senza media queries.clamp(min, preferred, max)h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
/* Minimo 1.5rem, pr...
-
La proprietà aspect-ratio mantiene le proporzioni di un elemento.Sintassi.video-container {
aspect-ratio: 16 / 9; /* Proporzione video HD */
width: 100%;
}
.square {
aspect-ratio: 1 / 1; /* Quadrato ...
-
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 elementi */
}
.grid-container {
displa...
-
I selettori avanzati permettono di targetizzare elementi con precisione.Selettori di attributo[type="text"] { } /* Attributo uguale */
[href^="https"] { } /* Inizia con */
[href$=".pdf"] { } /* Finisce con ...
-
Proprietà CSS per controllare il comportamento dello scroll.scroll-behaviorhtml {
scroll-behavior: smooth; /* Scroll fluido per anchor link */
}
/* Esempio link */
<a href="#section">Vai alla sezione</a>...
-
Differenze tra outline e border in CSS.BorderFa parte del box modelInfluenza le dimensioni dell elementoPuò avere border-radiusOutlineNON fa parte ...
-
La proprietà writing-mode cambia la direzione del flusso del testo.Valori disponibili.vertical {
writing-mode: vertical-rl; /* Verticale, destra a sinistra */
writing-mode: vertical-lr; /* Verticale, si...
-
La proprietà content genera contenuto tramite CSS (con ::before e ::after).Testo e simboli.required::after {
content: " *";
color: red;
}
.external-link::after {
content: " ↗";
}Attr...
-
La proprietà backdrop-filter applica filtri grafici allo sfondo dietro un elemento.Effetto glassmorphism.glass-card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdro...
-
Le media query print permettono di ottimizzare lo stile per la stampa.Base@media print {
/* Nascondi elementi non necessari */
nav, footer, .sidebar, .ads {
display: none !important;
}
/* Col...
-
Best practice CSS per rendere i siti accessibili.Focus visibile/* NON rimuovere mai outline senza alternativa */
:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
/* Focus-visible per utenti ...
-
I CSS Reset e Normalize uniformano gli stili di default tra browser.Reset minimale moderno*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size...
-
Guida completa alle unità di misura in CSS.Unità assolutepx - Pixel, fissopt - Punti (stampa)cm, mm, in - Misure fisiche...
-
Tecniche per debuggare problemi CSS.Browser DevToolsIspeziona elemento (F12 o click destro)Modifica stili in tempo realeVisualizza box modelComputed styles per valori effettivi...