Lösung: CSS

Ansicht der HTML-Seite

Die Farbe von <h1> ist schwarz, weil dies in der eingebundenen externen Stylesheet-Datei index.css so definiert und dieses im Folgenden nicht wieder überschrieben wird. Allerdings ist schwarz auch die Standardanzeigefarbe im Browser, so dass die Definition eigentlich erfolgen müsste.

<h2> ist rot, weil der Inline-Style die höchste Priorität hat und die vorherige Definition (grey der internen Stylesheet-Anweisung im HTML-Kopf) überschreibt.

<h3> ist grau, weil das interne Stylesheet das der externen Datei überschreibt.

<h4> ist orange, weil der mit !IMPORTANT gekennzeichnete Style nicht mehr überschrieben werden kann und immer zur Anwendung kommt. (Vorausgesetzt er wird nicht wieder von einem anderen auch mit !IMPORTANT gekennzeichneten Style überschrieben.)

Vor- und Nachteile der !IMPORTANT-Regel

Manchmal ist die Suche nach dem letzten wirksamen Stylesheet sehr mühsam oder dieser Style lässt sich nicht ohne weiteres ändern. Dann kann mit der !IMPORTANT-Regel sehr leicht ein anderes Design festgelegt werden.

Auf der anderen Seite wird es nun noch unübersichtlicher, weil die normale Kaskade und Spezifizität außer Kraft gesetzt wird, was das Debugging und die Wartung erschwert.