W języku CSS zapis h2 {background-color: green;} sprawi, że koloru zielonego będzie
Pytanie z egzaminu CKE, czerwiec 2016 (arkusz E.14-X-16.05).
Reguła ma selektor h2, więc dotyczy tylko nagłówków drugiego stopnia. Właściwość background-color ustawia kolor tła elementu, a nie tekstu. Nagłówek jest elementem blokowym, więc zielone tło rozciągnie się na całą szerokość jego pojemnika, za tekstem nagłówka. Kolor samych liter zmienia się inną właściwością - color. Gdyby tło miało dotyczyć wszystkich nagłówków, trzeba by wymienić selektory po przecinku: h1, h2, h3 {...}. Tło całej strony ustawia się w regule dla body. Do zapamiętania: selektor mówi, co jest formatowane, a właściwość - jak; background-color to tło, color to kolor tekstu. Tło obejmie też wewnętrzny margines nagłówka.
Kłopot sprawiają dwie rzeczy: właściwość i zasięg selektora. Kolor czcionki ustawia color, a w regule jest background-color, która koloruje tło za tekstem - litery pozostaną w domyślnym kolorze. Dlatego odpada zarówno czcionka nagłówka drugiego stopnia, jak i czcionka wszystkich nagłówków. Ta druga wersja ma dodatkowo zły zasięg: selektor h2 wybiera wyłącznie nagłówki drugiego stopnia, a nie h1 czy h3. Tło całej strony wymagałoby selektora body, ewentualnie html. Czytając regułę, sprawdzaj kolejno selektor, czyli które elementy, oraz właściwość, czyli co w nich się zmienia. Tutaj wychodzi zielone tło nagłówków h2. Gdyby zielone miały być litery, w regule należałoby użyć właściwości color, a tło strony ustawiałaby reguła z selektorem body i właściwością background-color. Efekt najłatwiej sprawdzić, otwierając stronę w przeglądarce i oglądając nagłówki w narzędziach deweloperskich, które pokazują zastosowane reguły.