W zadaniu działają jednocześnie trzy poziomy stylów CSS: arkusz zewnętrzny, arkusz wewnętrzny oraz styl inline zapisany bezpośrednio przy elemencie. Zasada kaskady mówi, że przy tym samym selektorze i tej samej ważności wyżej stoi styl bardziej "lokalny". W praktyce: style inline ma wyższy priorytet niż reguły z arkuszy.
Dla elementu <img> w arkuszu zewnętrznym ustawiono: border: 3px solid black oraz margin: 20px. Następnie w arkuszu wewnętrznym pojawia się reguła img { border-color: red }. To nie usuwa obramowania, tylko nadpisuje jego składową: kolor. Grubość (3 px) i styl linii (solid) nadal wynikają z deklaracji border.
W samym znaczniku <img> podano jeszcze style="margin: 15px". Ponieważ jest to styl inline, przeglądarka zastosuje margines 15 px zamiast 20 px z arkusza zewnętrznego.
- Poprawny wniosek: obramowanie będzie miało kolor czerwony (z border-color), a margines 15 px (ze stylu inline).
- Odpowiedź z czarną ramką jest błędna, bo kolor obramowania został jawnie nadpisany w arkuszu wewnętrznym.
- Odpowiedź z marginesem 20 px jest błędna, bo margines został nadpisany przez styl inline elementu.
Na egzaminie warto pamiętać skrót: inline > wewnętrzny > zewnętrzny (dla porównywalnych selektorów), a także że właściwości typu border mają składowe, które można zmieniać osobno.
