Selettori e Proprietà

Selettori e Proprietà CSS

I selettori sono il meccanismo con cui dici al browser quali elementi vuoi stilizzare. Le proprietà definiscono come devono apparire.

Selettori base

Esistono tre selettori fondamentali: per tag, per classe e per id.

/* Selettore per tag — tutti i paragrafi */
p {
  color: #333;
}

/* Selettore per classe — riutilizzabile */
.evidenziato {
  background-color: yellow;
}

/* Selettore per id — unico nella pagina */
#titolo-principale {
  font-size: 2rem;
}

Combinare selettori

Puoi combinare più selettori per essere più specifico.

/* Solo i paragrafi dentro un article */
article p {
  line-height: 1.8;
}

/* Elementi con due classi contemporaneamente */
.card.attiva {
  border-color: blue;
}

Specificità

La specificità determina quale regola vince in caso di conflitto. L'ordine di forza è: inline style > id > classe > tag. Cerca sempre di usare classi per mantenere la specificità bassa e il codice manutenibile.