Selettori CSS

Congratulazioni! Avete appena inserito gli stili CSS esterni nella vostra pagina HTML.

Quando si specificano gli stili dei tag utilizzando l'attributo style, il browser sa immediatamente a quale tag applicare gli stili. Ma quando gli stili sono allegati tramite un file esterno o il tag <style>, il browser cerca i tag con lo stile utilizzando i "selettori".

Avete già una certa familiarità con i selettori: nel compito precedente avete usato il selettore p, che si trovava davanti alle parentesi graffe nel codice CSS. La sintassi delle regole CSS è la seguente:

selettore {
  property1: value1;
  property2: value2;
  ...
}

Il linguaggio dei selettori è molto potente e flessibile. I selettori più semplici sono quelli per nome di tag: p, h1 e così via. Il browser applica gli stili di una regola con questo selettore a tutti i tag corrispondenti. Ad esempio, a tutti i paragrafi o a tutte le intestazioni di primo livello.

Nel nostro esempio, il selettore p ha evidenziato tutti i paragrafi in verde. Come fare per renderli di colore diverso? Si possono aggiungere altri tag all'interno dei paragrafi. Poi si possono usare i selettori per i diversi tag nei CSS e dare loro colori diversi.