Przedstawione formatowanie CSS sprawi, że dla prezentowanego nagłówka trzeciego stopnia
<style> h3 { background-color: grey; } </style> … <h3 style="background-color: orange;">Rozdział 1.2.2.</h3>
A. tło będzie pomarańczowe.
B. kolor czcionki będzie szary.
C. kolor czcionki będzie pomarańczowy.
D. tło będzie szare.
W tym przypadku nagłówek h3 będzie miał tło pomarańczowe, ponieważ styl wpisany bezpośrednio w atrybucie style elementu ma wyższy priorytet w kaskadzie CSS niż reguła zapisana w sekcji style dla selektora h3. Reguła ogólna mówi: h3 { background-color: grey; }, czyli wszystkie nagłówki trzeciego stopnia mają dostać szare tło. Jednak konkretny element ma ustawione background-color: orange; bezpośrednio przy sobie, więc przeglądarka potraktuje to jako bardziej szczegółową deklarację. W uproszczeniu: styl inline jest mocniejszy niż zwykły selektor typu, o ile nie pojawi się np. !important w innym miejscu. Warto też zauważyć, że background-color zmienia tło, a nie kolor tekstu. Kolor czcionki ustawia się właściwością color. Z mojego doświadczenia najlepiej unikać nadmiaru stylów inline w większych projektach, bo trudniej się je potem utrzymuje. Lepszą praktyką jest używanie klas CSS, na przykład klasa rozdzial-aktywny z odpowiednim kolorem tła. Ale do zrozumienia kaskady ten przykład jest bardzo dobry, bo pokazuje, że CSS nie działa tylko od góry do dołu, ale też według ważności i szczegółowości reguł.
W tym zadaniu łatwo pomylić dwie różne rzeczy: właściwość CSS oraz mechanizm pierwszeństwa reguł. Deklaracja background-color nie dotyczy koloru liter, tylko koloru tła elementu. Jeżeli chcemy zmienić kolor czcionki, używamy właściwości color, na przykład color: grey albo color: orange. Dlatego wniosek, że czcionka będzie szara lub pomarańczowa, wynika zwykle z czytania samej nazwy koloru, a nie całej deklaracji CSS. To taki typowy błąd na początku nauki, sam go często widziałem u osób robiących pierwsze strony. Druga pułapka dotyczy tego, że w sekcji style istnieje reguła dla h3 ustawiająca szare tło. Ona faktycznie pasuje do tego nagłówka, ale nie jest ostateczna. Ten sam element ma jeszcze styl zapisany bezpośrednio w atrybucie style: background-color: orange;. W kaskadzie CSS taki styl inline ma wyższy priorytet niż zwykła reguła selektora elementu h3. Nie decyduje tu tylko kolejność zapisu, ale także szczegółowość i źródło deklaracji. Gdyby obie deklaracje miały podobną siłę, późniejsza mogłaby wygrać, ale tutaj inline jest po prostu bardziej konkretny. W praktyce przeglądarka oblicza styl końcowy elementu i wybiera pomarańczowe tło. Szare tło zostałoby użyte dla innych nagłówków h3, które nie mają własnego nadpisania w atrybucie style. Moim zdaniem to ważna rzecz, bo bez rozumienia kaskady CSS później trudno diagnozować, czemu jakiś kolor albo margines niby jest ustawiony, a jednak w przeglądarce wygląda inaczej.