W którym z przypadków walidacja fragmentu kodu CSS przebiegnie pomyślnie?
A.
p { text-size:bold; }
B.
<p style="font-size:bold;">
C.
p { font-weight:bold; }
D.
<p style="font-style:bold;">
Pytanie z egzaminu CKE, czerwiec 2021 (arkusz E.14-SG-21.06).
W tym fragmencie walidacja CSS przejdzie poprawnie, bo zapis p { font-weight: bold; } jest pełną, prawidłową regułą CSS. Mamy selektor p, czyli wskazanie, że styl ma dotyczyć akapitów, potem blok deklaracji w nawiasach klamrowych, a w nim właściwość font-weight z wartością bold. To jest zgodne ze składnią CSS: właściwość, dwukropek, wartość i średnik. W praktyce taki zapis pogrubi tekst we wszystkich elementach p na stronie, o ile nie zostanie nadpisany przez bardziej szczegółowy selektor albo styl inline. Moim zdaniem to jeden z tych przykładów, które dobrze pokazują różnicę między wyglądem tekstu a konkretną właściwością CSS. Pogrubienie ustawia się przez font-weight, a nie przez font-style czy font-size. Warto też pamiętać, że font-weight może przyjmować nie tylko bold i normal, ale też wartości liczbowe, np. 400, 700 albo 900, zależnie od dostępnej odmiany fontu. Z punktu widzenia dobrych praktyk lepiej umieszczać takie reguły w arkuszu CSS niż mieszać je bezpośrednio w HTML, bo kod jest wtedy czytelniejszy, łatwiejszy do utrzymania i zgodny z zasadą oddzielenia struktury dokumentu od prezentacji.
W niepoprawnych wariantach miesza się kilka różnych pojęć: składnię HTML, składnię CSS oraz znaczenie konkretnych właściwości stylów. Znacznik p z atrybutem style należy do kodu HTML, a nie jest samodzielną regułą CSS. Oczywiście w atrybucie style można wpisać deklaracje CSS, ale wtedy muszą one być poprawne zarówno pod względem nazwy właściwości, jak i wartości. Sam fakt, że coś znajduje się w cudzysłowie po style, nie oznacza jeszcze, że walidator uzna to za poprawny styl. To dość częsty błąd, szczególnie na początku nauki, bo zapis wygląda znajomo i wydaje się logiczny.
Właściwość font-style nie służy do pogrubiania tekstu. Ona odpowiada za styl kroju pisma, czyli na przykład normal, italic albo oblique. Wartość bold jest związana z grubością fontu, więc pasuje do font-weight. Podobnie font-size opisuje rozmiar tekstu i oczekuje wartości typu 16px, 1.2em, 120% albo słów kluczowych w rodzaju small czy larger. Wpisanie bold jako rozmiaru nie ma sensu semantycznego ani technicznego. Jest też pomysł z text-size, który brzmi intuicyjnie po angielsku, ale w standardowym CSS taka właściwość nie jest poprawną metodą ustawiania rozmiaru tekstu. Z mojego doświadczenia takie pomyłki biorą się z tłumaczenia nazw właściwości „na oko”, zamiast sprawdzenia ich w dokumentacji MDN albo w specyfikacji CSS. Poprawny zapis powinien jasno łączyć właściwość z odpowiednim typem wartości, np. font-weight: bold; dla pogrubienia albo font-size: 18px; dla rozmiaru tekstu.
Właściwość font-style nie służy do pogrubiania tekstu. Ona odpowiada za styl kroju pisma, czyli na przykład normal, italic albo oblique. Wartość bold jest związana z grubością fontu, więc pasuje do font-weight. Podobnie font-size opisuje rozmiar tekstu i oczekuje wartości typu 16px, 1.2em, 120% albo słów kluczowych w rodzaju small czy larger. Wpisanie bold jako rozmiaru nie ma sensu semantycznego ani technicznego. Jest też pomysł z text-size, który brzmi intuicyjnie po angielsku, ale w standardowym CSS taka właściwość nie jest poprawną metodą ustawiania rozmiaru tekstu. Z mojego doświadczenia takie pomyłki biorą się z tłumaczenia nazw właściwości „na oko”, zamiast sprawdzenia ich w dokumentacji MDN albo w specyfikacji CSS. Poprawny zapis powinien jasno łączyć właściwość z odpowiednim typem wartości, np. font-weight: bold; dla pogrubienia albo font-size: 18px; dla rozmiaru tekstu.