CSS: sovrascrivere l’attributo style di un elemento dal foglio di stile

Con i fogli di stile il web ha conosciuto una nuova era per quanto riguarda la grafica. Con i fogli di stile viene, una volta per tutte, stabilita una netta separazione fra il contenuto della pagina e la sua visualizzazione. Queste regole possono essere sia messe in un file esterno alla pagina stessa, oppure caricate all’interno della pagina stessa.

Prendiamo ad esempio il seguente file html:

<html>
<head>
<title>Sovrascrivere le regole di stile inline</title>
</head>
<body>
<div class="rosso">Questo testo sarà rosso</div>
<div class="rosso" style="color: #0000FF">Anche questo testo è rosso</div>
</body>
</html>

E applichiamogli il seguente foglio di stile:

div.rosso {
color: #FF0000;
}

La prima frase verrà mostrata in rosso e la seconda in blu poichè la regola scritta nell’attributo style ha la precedenza rispetto a quella scritta nel generico foglio di stile. Solitamente, si consiglia di evitare le regole scritte inline (ossia, in-riga) e di utilizzare solamente le regole esterne, altrimenti viene meno il motivo stesso per cui bisognerebbe preferire i fogli di stile rispetto agli attributi html.

È possibile però che voi non abbiate direttamente accesso al codice html, ad esempio perchè questo viene modificato da uno script javascript esterno. Fortunatamente, esiste un modo per sovrascrivere le direttive interne all’attributo style con quelle del vostro foglio di stile.

div.rosso[style] {
color: #FF0000 !important;
}

Grazie alla direttiva !important il vostro foglio di stile avrà la precedenza su quanto dichiarato nell’attributo style.