![[css3_logo.png|139]] Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire l’aspetto estetico e la presentazione dei contenuti in un documento [[HTML]]. In gergo tecnico si usa dire quindi che HTML definisce gli "elementi" e il CSS il loro "stile". All’inizio era possibile definire anche lo stile direttamente dentro il file HTML, ma presto si è scelto di separare contenuto e forma per mantenere il codice più ordinato. s Per questo lo stile viene generalmente scritto in un file CSS esterno, che viene poi collegato all’HTML. --- **Sistema per classi:** HTML e CSS comunicano principalmente tramite le **classi**, che sono attributi assegnati agli elementi HTML. In questo modo il CSS può riferirsi a questi selettori e definirne lo stile, come colori, dimensioni, spaziature e layout. Ad esempio, se un elemento ha `class="pulsante1"`, nel CSS si può scrivere una regola `.pulsante1` per definire l'aspetto di tutti gli elementi con quella classe --- **Prototipo:** Siccome è abbastanza macchinoso progettare un design direttamente scrivendo codice, si tende prima a creare un prototipo con strumenti come Figma, Adobe XD o semplicemente carta e penna. Questo viene poi tradotto in codice nel modo più fedele possibile durante il processo di [[Web Development]]. --- **Framework** Oggi raramente si usa CSS puro da zero: nella maggior parte dei casi si utilizzano dei **framework**, cioè librerie di stili già pronti che velocizzano lo sviluppo e aiutano a mantenere coerenza nel design. Tra i più usati ci sono: - **Tailwind CSS** - **Bootstrap** --- **Brief History:* il CSS ha avuto diverse evoluzioni nel tempo. Nasce a metà anni ’90, ma per molti anni è stato piuttosto limitato: serviva soprattutto per colori, font e layout molto semplici. Il vero salto arriva con **CSS3** (introdotto a partire dal 2010 circa), che porta funzionalità più avanzate come animazioni, transizioni, ombre, gradienti e soprattutto sistemi di layout moderni come **Flexbox** e **Grid**. Da quel momento il CSS diventa molto più potente e in grado di gestire gran parte dell’aspetto e della disposizione degli elementi senza bisogno di altro. --- *curiosità:* Attraverso tasto destro - ispeziona/inspector/per sviluppatori, è possibile vedere il file html sorgente di qualsiasi sito web, prova tu stesso! ![[css_snippet.png]]