Waarom overschrijft inline CSS mijn stijlbestand?
Inline CSS overschrijft je stijlbestand omdat opmaak bij het element specifieker is dan opmaak in een bestand. De browser kiest altijd de meest specifieke regel.
Dat is geen fout maar de bedoeling: hoe dichter een regel bij het element staat, hoe zwaarder hij weegt.
Het verklaart waarom je centrale kleurwijziging soms niets doet.
De rangorde
Van licht naar zwaar: een regel op een elementsoort, een regel op een klasse, een regel op een naam, en dan inline opmaak.
Bij gelijke zwaarte wint de regel die het laatst staat. Meer daarover lees je bij css.
Hoe je het ziet
In de inspectiefunctie van je browser staan alle regels die op een element van toepassing zijn. De overschreven regels zijn doorgestreept.
De bovenste niet-doorgestreepte regel wint. Meer daarover lees je bij html.
Wat je eraan doet
De inline opmaak weghalen bij de bron. Dat is beter dan er met een zwaardere regel overheen gaan.
Meer daarover lees je bij hoe je inline CSS opruimt.
Mijn vuistregels
- Zoek de bron in plaats van hem te overschrijven.
- Gebruik de uitroeptekenregel niet als noodgreep.
- Controleer of je paginabouwer een globale instelling heeft.
- Kijk altijd eerst in de inspectiefunctie.
Die tweede lost het symptoom op en maakt het probleem groter.
De enige regel die zwaarder weegt
Een regel met een uitroepteken erachter wint van inline opmaak. Dat is de noodgreep die je maar zelden moet gebruiken.
Doe je het toch, noteer dan waarom. Meer daarover lees je bij child theme.
Bij een paginabouwer
Die zet vrijwel alles inline of in zeer specifieke regels. Stel daarom je kleuren en lettertypen in bij de globale instellingen.
Meer daarover lees je bij elementor.