Wskaż prawidłową kolejność stylów CSS, mając na uwadze ich pierwszeństwo w formatowaniu elementów strony WWW.
Pytanie z egzaminu CKE, styczeń 2018 (arkusz E.14-X-18.01).
Prawidłowa kolejność pierwszeństwa to: lokalny, wewnętrzny, zewnętrzny. Styl lokalny to atrybut style zapisany bezpośrednio w znaczniku, np. <p style="color: red"> - dotyczy jednego elementu i wygrywa z pozostałymi. Styl wewnętrzny to reguły w sekcji <style> dokumentu, a zewnętrzny - plik CSS dołączony znacznikiem <link>. Do zapamiętania: im bliżej elementu zapisano regułę, tym większe ma pierwszeństwo. Przy równej szczegółowości selektorów o wyniku między stylem wewnętrznym a zewnętrznym decyduje też kolejność w kodzie - wygrywa reguła wczytana później. Ponad tymi poziomami stoi deklaracja z dopiskiem !important, która wygrywa z innymi regułami dla tej samej właściwości. Pierwszeństwo zależy też od szczegółowości selektora: identyfikator jest silniejszy od klasy, a klasa od nazwy znacznika.
Błędne odpowiedzi odwracają kolejność albo mieszają nazwy, które nie są poziomami stylów. Styl zewnętrzny ma najniższe pierwszeństwo z trzech, bo jest najdalej od elementu, więc nie może stać na początku listy. Styl lokalny, zapisany w atrybucie style, nie może też być na końcu - to on wygrywa z pozostałymi. „Rozciąganie stylu” i „wydzielone bloki” nie są rodzajami stylów CSS, tylko mylącymi określeniami. Zasada jest prosta: reguła zapisana bliżej elementu ma pierwszeństwo, dlatego kolejność to styl lokalny, wewnętrzny, zewnętrzny. Kolejność łatwo zapamiętać przez skojarzenie z odległością: styl lokalny jest zapisany w samym znaczniku, wewnętrzny w tym samym pliku HTML, a zewnętrzny w osobnym pliku. Im dalej od elementu, tym słabiej. Nazwy „rozciąganie stylu” i „wydzielone bloki” nie pojawiają się w specyfikacji CSS, więc odpowiedzi z nimi odpadają od razu.