Cos'è CSS?

Le Cascading Style Sheets (CSS) sono un linguaggio di stile utilizzato per descrivere la presentazione di un documento scritto in un linguaggio di markup (HTML, XHTML, SVG, XML).

Funzioni principali dei CSS:

Separazione di presentazione e contenuto: Permette di modificare l’aspetto di una pagina web senza alterarne la struttura.
Stilizzazione degli elementi: Gestione di colori, font, dimensioni, margini, bordi e altre proprietà visive degli elementi.
Creazione di design reattivi: Con le media query, si possono applicare stili diversi a seconda delle caratteristiche del dispositivo dell’utente (risoluzione dello schermo, orientamento, ecc.).
Animazioni e transizioni: Creazione di effetti visivi per l’interattività e il miglioramento dell’esperienza utente.
Gestione del layout: Posizionamento degli elementi sulla pagina usando diverse tecniche (Flexbox, Grid, float, ecc.).

Struttura di una regola CSS:

/* Selettore */
h1 {
  /* Dichiarazioni */
  color: blue; /* Proprietà: valore; */
  font-size: 24px;
}

Principali metodi di collegamento CSS a un documento HTML:

File esterno (<link>): Il metodo più comune e raccomandato. Gli stili sono memorizzati in un file .css separato.
```
<link rel="stylesheet" href="styles.css">
```
Dentro il tag <style>: Gli stili sono definiti direttamente nel documento HTML, di solito nella sezione <head>. Adatto per stili piccoli o test rapidi.
```
<style>
  p {
    line-height: 1.5;
  }
</style>
```
Stili inline (style attributo): Gli stili vengono applicati a un elemento HTML specifico tramite l’attributo style. Ha alta priorità, ma rende più difficile la manutenzione e la scalabilità.
```
<div style="border: 1px solid black;">
  Questo div ha uno stile inline.
</div>
```

La cascata determina come il browser applica gli stili quando ci sono più regole in conflitto per lo stesso elemento. Si considera:

Priorità dei selettori: I selettori più specifici hanno priorità più alta.
Ordine di dichiarazione: Le regole dichiarate più tardi sovrascrivono quelle precedenti con la stessa priorità.
Importanza (!important): Le dichiarazioni con !important hanno la priorità più alta (da usare con cautela).
Fonte degli stili: Gli stili dell’autore hanno priorità maggiore rispetto a quelli dell’utente o agli stili di default del browser.