Dla akapitu zdefiniowano styl CSS. Które właściwości stylu CSS poprawnie opisują dla akapitu krój czcionki: Verdana; rozmiar czcionki: 14 px; grubość czcionki: pogrubienie?
A.
p{font-family: Verdana; font-size: 14pt; font-weight: bold;}
B.
p{font-style: Verdana; size: 14pt; font-weight: normal;}
C.
p{font-family: Verdana; font-size: 14px; font-weight: bold;}
D.
p{font-style: Verdana; font-size: 14px; font-variant: bold;}
W tym zapisie użyto właściwych właściwości CSS do opisania wyglądu tekstu w akapicie: p { font-family: Verdana; font-size: 14px; font-weight: bold; }. Selektor p oznacza, że reguła dotyczy wszystkich akapitów w dokumencie HTML, czyli elementów p. Właściwość font-family odpowiada za krój pisma, więc Verdana jest wpisana dokładnie tam, gdzie powinna być. font-size określa rozmiar czcionki i tutaj jednostka px zgadza się z treścią zadania: 14px, a nie 14pt. Z kolei font-weight służy do ustawiania grubości znaków, dlatego wartość bold oznacza pogrubienie. Moim zdaniem warto zapamiętać ten zestaw, bo pojawia się bardzo często przy prostym formatowaniu tekstu na stronach WWW. W praktyce dobrze jest też dodać font zastępczy, np. p { font-family: Verdana, Arial, sans-serif; }, bo nie każda czcionka musi być dostępna w systemie użytkownika. To jest zgodne z dobrymi praktykami CSS: podajemy konkretną czcionkę, a potem ogólną rodzinę jako awaryjną.
W błędnych zapisach widać kilka dość typowych pomyłek, które często wychodzą przy nauce CSS. Najważniejsze jest to, że krój czcionki ustawia się właściwością font-family, a nie font-style. font-style odpowiada za styl pisma, na przykład normal, italic albo oblique, czyli raczej za kursywę, a nie za wybór Verdany czy Arial. Wpisanie font-style: Verdana nie opisuje poprawnie rodziny fontu i przeglądarka najczęściej potraktuje taką deklarację jako niepoprawną lub ją zignoruje. Podobnie font-variant nie służy do pogrubienia. Ta właściwość dotyczy odmian znaków, na przykład small-caps, czyli kapitalików. Grubość tekstu ustawia się przez font-weight, a wartość bold oznacza właśnie pogrubienie. Częsty błąd to też pomylenie font-size z samym size. W CSS dla tekstu używa się font-size, ponieważ size jako ogólna właściwość nie jest standardowym sposobem ustawiania rozmiaru czcionki w arkuszu stylów. Trzeba też uważać na jednostki: w zadaniu podano 14 px, więc poprawne jest 14px. Jednostka pt kojarzy się bardziej z typografią i drukiem, dlatego w projektowaniu ekranowym najczęściej spotykamy px, rem albo em. Różnica między 14px i 14pt nie jest kosmetyczna, bo przeglądarka interpretuje je inaczej. Z mojego doświadczenia najlepiej czytać deklarację CSS jak zdanie: rodzina fontu to font-family, rozmiar to font-size, grubość to font-weight. Wtedy łatwiej uniknąć mieszania właściwości o podobnych nazwach.