Sintassi CSS

La sintassi CSS è composta da regole che definiscono come gli elementi HTML devono essere visualizzati. Ogni regola CSS è composta da un selettore e da una dichiarazione. Il selettore specifica l'elemento HTML a cui si applica la regola, mentre la dichiarazione contiene una o più proprietà e i loro valori. La proprietà è separata dal valore da due punti. Ciascuna dichiarazione è racchiusa tra parentesi graffe e le proprietà sono separate da punti e virgola.


        selettore {
        

          proprietà: valore;
        

          proprietà: valore;
        

        }

Selettori CSS

I selettori CSS sono utilizzati per selezionare gli elementi HTML a cui si desidera applicare le regole di stile. Esistono diversi tipi di selettori, tra cui:

Selettore universale (si applica a tutti gli elementi):

* {color: black;}

Selettore per tag:

p {color: red;}

Selettore per classe:

.classe {color: blue;}

Selettore per id:

#id {color: green;}

Combinazioni

Esempi di combinazioni di selettori di base:

Gli elementi <p> appartenenti alla classe "tramonto" verranno colorati di rosso:

p.tramonto {color: red;}

Vengono applicati gli stili della classe "centro" e della classe "grande":

<p class="centro grande">Paragrafo che fa riferimento a due classi</p>

Il colore rosso viene applicato agli elementi <p>, <h1> e <h2>:

p, h1, h2 {color: red;}

Come aggiungere CSS

Esistono tre modi per aggiungere CSS a un documento HTML:

Esterno: utilizzando un file esterno con estensione .css e collegandolo con l'elemento <link> all'interno dell'elemento <head>, ad esempio:

<link rel="stylesheet" href="stile.css">

Interno: utilizzando l'elemento <style> all'interno dell'elemento <head>, ad esempio:

<style>body {background-color: yellow;}</style>

Inline: utilizzando l'attributo style su un elemento HTML, ad esempio:

<p style="color: red;">Paragrafo rosso</p>

Se un attributo style è presente in un elemento HTML, esso ha la precedenza su qualsiasi regola CSS esterna o interna.

Commenti CSS

I commenti in CSS iniziano con /* e terminano con */. I commenti possono essere posizionati ovunque nel file CSS e non influenzano il rendering della pagina, ad esempio:

/* Questo è un commento in CSS */ p {color: blue; /* Colore del testo */}