🎨 Guida Completa CSS

/* Seleziona TUTTI gli elementi della pagina */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Seleziona tutti i paragrafi */
p {
    color: #333;
    line-height: 1.6;
}

/* Seleziona tutti i titoli h1 */
h1 {
    font-size: 36px;
    color: #667eea;
}

/* Seleziona tutti i link */
a {
    text-decoration: none;
    color: #667eea;
}

/* HTML: <div class="box">...</div> */
.box {
    width: 300px;
    padding: 20px;
    background: #f0f0f0;
}

/* HTML: <button class="btn-primary">Clicca</button> */
.btn-primary {
    background: #667eea;
    color: white;
    padding: 10px 20px;
}

/* Più classi: <div class="card shadow">...</div> */
.card {
    border-radius: 8px;
}
.shadow {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* HTML: <div id="header">...</div> */
/* ATTENZIONE: L'ID è unico, usalo solo una volta per pagina! */
#header {
    background: #2d2d2d;
    color: white;
    height: 80px;
}

#footer {
    text-align: center;
    padding: 30px;
}

/* Selettore Discendente (spazio) - tutti i p dentro div */
div p {
    color: blue;
}

/* Selettore Figlio Diretto (>) - solo i p figli diretti di div */
div > p {
    color: red;
}

/* Selettore Fratello Adiacente (+) - p subito dopo div */
div + p {
    margin-top: 20px;
}

/* Selettore Fratelli Generali (~) - tutti i p dopo div */
div ~ p {
    color: green;
}

/* Selettore Multiplo (,) - stessa regola per più elementi */
h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: #2d2d2d;
}

/* :hover - quando passi il mouse sopra */
button:hover {
    background: #764ba2;
    transform: scale(1.05);
}

/* :active - quando clicchi */
button:active {
    transform: scale(0.95);
}

/* :focus - quando l'elemento è selezionato (input, link) */
input:focus {
    border-color: #667eea;
    outline: none;
}

/* :first-child - primo figlio */
li:first-child {
    font-weight: bold;
}

/* :last-child - ultimo figlio */
li:last-child {
    border-bottom: none;
}

/* :nth-child(n) - n-esimo figlio */
tr:nth-child(even) {
    background: #f0f0f0; /* Righe pari */
}
tr:nth-child(odd) {
    background: white; /* Righe dispari */
}

/* 1. Nomi Colori (140 colori predefiniti) */
.box1 { color: red; }
.box2 { color: dodgerblue; }
.box3 { color: coral; }

/* 2. Esadecimale (più usato) */
.box4 { color: #FF0000; } /* Rosso */
.box5 { color: #00FF00; } /* Verde */
.box6 { color: #0000FF; } /* Blu */
.box7 { color: #F00; } /* Rosso (formato corto) */

/* 3. RGB - Red Green Blue (0-255) */
.box8 { color: rgb(255, 0, 0); } /* Rosso */
.box9 { color: rgb(102, 126, 234); } /* Viola/Blu */

/* 4. RGBA - RGB + Alpha (trasparenza 0-1) */
.box10 { background: rgba(255, 0, 0, 0.5); } /* Rosso 50% trasparente */
.box11 { background: rgba(0, 0, 0, 0.8); } /* Nero 80% opaco */

/* 5. HSL - Hue Saturation Lightness */
.box12 { color: hsl(0, 100%, 50%); } /* Rosso */
.box13 { color: hsl(240, 100%, 50%); } /* Blu */

/* 6. HSLA - HSL + Alpha */
.box14 { background: hsla(120, 100%, 50%, 0.3); } /* Verde trasparente */

/* Gradiente Lineare */
.gradient-1 {
    background: linear-gradient(to right, #667eea, #764ba2);
}

/* Gradiente con angolo */
.gradient-2 {
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
}

/* Gradiente con più colori */
.gradient-3 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

/* Gradiente Radiale (circolare) */
.gradient-4 {
    background: radial-gradient(circle, #667eea, #764ba2);
}

/* Font Family (tipo di carattere) */
.testo1 {
    font-family: Arial, Helvetica, sans-serif; /* Lista fallback */
}

.testo2 {
    font-family: 'Times New Roman', Times, serif;
}

.testo3 {
    font-family: 'Courier New', Courier, monospace;
}

/* Font da Google Fonts (nel head HTML) */
/* <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> */
.testo4 {
    font-family: 'Roboto', sans-serif;
}

/* Dimensioni Font */
.size-px { font-size: 16px; } /* Pixel (fisso) */
.size-em { font-size: 1.5em; } /* Relativo al parent */
.size-rem { font-size: 1.5rem; } /* Relativo al root */
.size-percent { font-size: 120%; } /* Percentuale */

/* Peso Font (grassetto) */
.peso-1 { font-weight: normal; } /* 400 */
.peso-2 { font-weight: bold; } /* 700 */
.peso-3 { font-weight: 100; } /* Ultra sottile */
.peso-4 { font-weight: 900; } /* Ultra grassetto */

/* Stile Font */
.italic { font-style: italic; } /* Corsivo */
.oblique { font-style: oblique; } /* Obliquo */

/* Decorazione Testo */
.underline { text-decoration: underline; } /* Sottolineato */
.line-through { text-decoration: line-through; } /* Barrato */
.overline { text-decoration: overline; } /* Linea sopra */
.no-decoration { text-decoration: none; } /* Nessuna (per link) */

/* Trasformazione Testo */
.uppercase { text-transform: uppercase; } /* MAIUSCOLO */
.lowercase { text-transform: lowercase; } /* minuscolo */
.capitalize { text-transform: capitalize; } /* Prima Lettera Maiuscola */

/* Allineamento Orizzontale */
.align-left { text-align: left; } /* A sinistra */
.align-center { text-align: center; } /* Centrato */
.align-right { text-align: right; } /* A destra */
.align-justify { text-align: justify; } /* Giustificato */

/* Interlinea (spazio tra righe) */
.line-height-1 { line-height: 1; } /* Compatto */
.line-height-2 { line-height: 1.6; } /* Standard leggibile */
.line-height-3 { line-height: 2; } /* Doppia spaziatura */

/* Spaziatura Lettere */
.letter-spacing-1 { letter-spacing: 2px; } /* Spazio tra lettere */
.letter-spacing-2 { letter-spacing: -1px; } /* Lettere più vicine */

/* Spaziatura Parole */
.word-spacing { word-spacing: 10px; } /* Spazio tra parole */

/* Indentazione prima riga */
.text-indent { text-indent: 50px; } /* Rientra prima riga */

/* Ombra Testo */
.text-shadow-1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    /* offset-x offset-y blur colore */
}

.text-shadow-2 {
    text-shadow: 0 0 10px #667eea, 0 0 20px #764ba2;
    /* Effetto glow (bagliore) */
}

/* Testo con Gradiente (avanzato) */
.text-gradient {
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 48px;
    font-weight: bold;
}

/* Testo con Bordo (stroke) */
.text-stroke {
    -webkit-text-stroke: 2px #667eea;
    color: transparent;
    font-size: 48px;
    font-weight: bold;
}

/* Box Model Completo */
.box {
    /* CONTENUTO */
    width: 300px;        /* Larghezza contenuto */
    height: 200px;       /* Altezza contenuto */
    
    /* PADDING (spazio interno) */
    padding: 20px;        /* Tutti i lati */
    /* OPPURE specifici: */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    /* Shorthand: padding: top right bottom left */
    padding: 10px 20px 10px 20px; /* orologio */
    padding: 10px 20px;   /* verticale orizzontale */
    
    /* BORDER (bordo) */
    border: 2px solid black; /* spessore stile colore */
    
    /* MARGIN (spazio esterno) */
    margin: 30px;         /* Tutti i lati */
    /* Stessa logica del padding per margini specifici */
}

/* Stili di Bordo */
.border-solid { border: 3px solid black; }
.border-dashed { border: 3px dashed blue; }
.border-dotted { border: 3px dotted red; }
.border-double { border: 5px double green; }
.border-groove { border: 5px groove gray; }
.border-ridge { border: 5px ridge purple; }

/* Bordi Specifici */
.border-custom {
    border-top: 5px solid red;
    border-right: 3px dashed blue;
    border-bottom: 2px dotted green;
    border-left: 4px double purple;
}

/* Bordi Arrotondati (MOLTO USATI!) */
.rounded-1 { border-radius: 10px; } /* Tutti gli angoli */
.rounded-2 { border-radius: 50%; } /* Cerchio perfetto */
.rounded-3 { border-radius: 20px 0 20px 0; } /* Angoli alternati */
.rounded-4 { border-radius: 50px 50px 0 0; } /* Solo sopra arrotondato */

/* Ombra Base */
.shadow-1 {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    /* offset-x offset-y blur colore */
}

/* Ombra Diffusa (soft shadow) */
.shadow-2 {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Ombra Pronunciata */
.shadow-3 {
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Ombra Interna */
.shadow-inset {
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
}

/* Multiple Ombre */
.shadow-multiple {
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.1),
        0 5px 15px rgba(0,0,0,0.2),
        0 10px 30px rgba(0,0,0,0.1);
}

/* Ombra Colorata (effetto glow) */
.shadow-glow {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
}

/* Container Flex */
.flex-container {
    display: flex;
    flex-direction: row; /* row | row-reverse | column | column-reverse */
    justify-content: center; /* allineamento orizzontale */
    align-items: center; /* allineamento verticale */
    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
    gap: 20px; /* spazio tra gli elementi */
}

/* Elementi Flex */
.flex-item {
    flex: 1; /* grow shrink basis */
    flex-grow: 1; /* può crescere */
    flex-shrink: 1; /* può restringersi */
    flex-basis: 200px; /* dimensione base */
    align-self: flex-start; /* allineamento individuale */
}

/* Container Grid */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 colonne uguali */
    grid-template-rows: 100px auto 100px; /* altezze righe */
    gap: 20px; /* spazio tra celle */
    grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

/* Elementi Grid */
.grid-item {
    grid-column: 1 / 3; /* da colonna 1 a 3 */
    grid-row: 1; /* prima riga */
    grid-area: header; /* area nominata */
}

/* Grid Responsive */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Transizione Base */
.transition-base {
    transition: all 0.3s ease;
    /* property duration timing-function delay */
}

.transition-specific {
    transition-property: transform, background-color;
    transition-duration: 0.3s, 0.5s;
    transition-timing-function: ease-out;
    transition-delay: 0.1s;
}

/* Esempi di Timing Functions */
.ease { transition-timing-function: ease; }
.linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }
.cubic-bezier { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* Definizione Animazione */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/* Applicazione Animazione */
.animated-element {
    animation-name: slideIn;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0.5s;
    animation-iteration-count: infinite; /* 1 | infinite */
    animation-direction: alternate; /* normal | reverse | alternate */
    animation-fill-mode: both; /* none | forwards | backwards | both */
    
    /* Shorthand */
    animation: slideIn 1s ease-out 0.5s infinite alternate both;
}