Jaki rozmiar czcionki będzie miał tekst akapitów dla następującej definicji stylu?
p { color: blue; font-size: 14pt; font-style: italic; } a { font-size: 16pt; text-transform: lowercase; } td.niebieski { color: blue; } td.czerwony { color: red; }
A. 14 punktów
B. domyślny rozmiar przeglądarki
C. 16 punktów
D. 12 punktów
Tekst akapitów będzie miał rozmiar 14 punktów. Wynika to bezpośrednio z reguły CSS zapisanej dla selektora p: właściwość font-size ma tam wartość 14pt. Selektor p odnosi się do wszystkich elementów akapitu p, więc przeglądarka zastosuje do nich kolor niebieski, kursywę oraz rozmiar czcionki 14pt. Reguła dla a z wartością 16pt dotyczy elementów odsyłaczy, a nie całych akapitów. Reguły td.niebieski i td.czerwony dotyczą komórek tabeli z określonymi klasami i ustawiają tylko kolor tekstu. Do zapamiętania: w CSS właściwość font-size określa rozmiar czcionki dla elementów pasujących do danego selektora, np. p { font-size: 14pt; }.
W tym kodzie trzeba najpierw sprawdzić, do jakiego selektora przypisana jest właściwość font-size. Poprawny rozmiar tekstu akapitów to 14 punktów, ponieważ reguła p zawiera zapis font-size: 14pt. Wartość 16 punktów odnosi się do selektora a, czyli do odsyłaczy. Byłaby trafna dla tekstu linków, ale nie dla całych akapitów p. Wartość 12 punktów nie pojawia się w podanej definicji stylu, więc nie można jej wywnioskować z tego fragmentu CSS. Domyślny rozmiar przeglądarki byłby użyty wtedy, gdy dla akapitów nie zdefiniowano by własności font-size ani nie odziedziczyłyby jej z innego elementu. Tutaj jednak akapity mają własną, jednoznaczną deklarację. Typowy błąd polega na patrzeniu na wszystkie reguły CSS naraz, bez dopasowania selektora do elementu. Najpierw trzeba ustalić element HTML, a dopiero potem odczytać właściwości z odpowiadającej mu reguły.