Una regola CSS è costituita da un selettore e un blocco di dichiarazioni. Ecco come funziona la sintassi di CSS:

Selettore CSS

Il selettore indica l’elemento HTML che si desidera stilizzare.

Blocco di dichiarazioni

Il blocco di dichiarazioni contiene una o più dichiarazioni separate da punti e virgola.

Ogni dichiarazione include un nome di proprietà CSS e un valore, separati da un due punti.

Le dichiarazioni CSS multiple sono separate da punti e virgola, e i blocchi di dichiarazioni sono racchiusi tra parentesi graffe.

 

1. Selettori

selettori sono il modo in cui CSS individua quali elementi HTML modellare. Quando scrivi una regola CSS, inizi con un selettore per definire a quale elemento o gruppo di elementi si applica la regola. I selettori possono puntare a elementi specifici (come p, div, h1), classi (precedute da un punto, come .classe), ID (preceduti da un cancelletto, come #id) e molto altro.

2. Regola

Una regola CSS è l’insieme di selettore e blocco di dichiarazioni. Serve per applicare uno stile specifico agli elementi selezionati. Una regola si compone di due parti principali: il selettore e il blocco di dichiarazioni.

3. Dichiarazione

Una dichiarazione è un singolo comando all’interno di un blocco di dichiarazioni in una regola CSS. Consiste in una proprietà e un valore, separati da un due punti. Ad esempio, color: red; è una dichiarazione.

4. Proprietà e Valori

  • Proprietà: La proprietà è il tipo di stile che vuoi modificare. Ad esempio, color, font-size, margin, padding sono tutte proprietà CSS.
  • Valori: Il valore è ciò che assegni a una proprietà. Specifica come vuoi modificare la proprietà. Ad esempio, per color, potresti avere red o #ff0000; per font-size, potresti avere 12px o 1.5em.

 

Esempio

In questo esempio, tutti gli elementi <p> saranno allineati al centro con un colore di testo rosso:

p {
  color: red;
  text-align: center;
}

Spiegazione dell’esempio

  • p è un selettore in CSS (indica l’elemento HTML che si vuole stilizzare, in questo caso, gli elementi <p>).
  • color è una proprietà, e red è il valore di quella proprietà.
  • text-align è una proprietà, e center è il valore di quella proprietà.