Wskaż stwierdzenie, które jest prawdziwe dla następującej definicji stylu:
<style> p {color: blue; font-size: 14pt; font-style: italic;} a {font-size: 16pt; text-transform: lowercase;} td.niebieski {color: blue;} td.czerwony {color: red;} </style>
A. Odnośnik będzie pisany czcionką 14 punktów.
B. Akapit będzie transponowany na małe litery.
C. Jest to styl lokalny.
D. Zdefiniowano dwie klasy.
Stwierdzenie, że zdefiniowano dwie klasy, jest prawdziwe, ponieważ w arkuszu CSS występują selektory td.niebieski oraz td.czerwony. Kropka przed nazwą oznacza klasę CSS, a zapis td.niebieski mówi dokładniej: zastosuj ten styl tylko do komórek tabeli td, które mają klasę niebieski. Analogicznie td.czerwony zadziała dla komórek td z klasą czerwony. W praktyce wyglądałoby to np. tak: komórka tabeli z class=niebieski miałaby niebieski tekst, a komórka z class=czerwony tekst czerwony. Moim zdaniem to bardzo ważny szczegół, bo klasy są jednym z podstawowych mechanizmów ponownego używania stylów na stronie. Zamiast wpisywać kolor osobno w każdym elemencie, nadaje się klasę i CSS robi resztę. Warto też zauważyć, że definicja znajduje się w znaczniku style, więc jest to arkusz wewnętrzny, a nie styl wpisany bezpośrednio w atrybucie style konkretnego elementu. Dobra praktyka w większych projektach to zwykle przenoszenie CSS do osobnego pliku .css, ale do krótkich przykładów edukacyjnych taki zapis jest całkiem normalny.
W tym przykładzie łatwo pomylić kilka pojęć z CSS, bo wszystkie deklaracje są zapisane obok siebie i wyglądają dość podobnie. Fragment umieszczony w znaczniku style nie jest stylem lokalnym w typowym rozumieniu używanym na lekcjach tworzenia stron. Styl lokalny, nazywany też często liniowym lub inline, zapisuje się bezpośrednio w elemencie HTML, np. w atrybucie style danego akapitu czy odnośnika. Tutaj mamy styl wewnętrzny, czyli reguły CSS umieszczone w dokumencie, ale nie przypisane wprost do jednego znacznika przez atrybut. To niby mała różnica, ale w praktyce bardzo istotna przy porządkowaniu kodu. Akapit p ma ustawiony kolor niebieski, rozmiar 14pt oraz font-style: italic, czyli tekst pochylony. Nie ma tam właściwości text-transform: lowercase, więc akapit nie będzie automatycznie zamieniany na małe litery. Ta właściwość znajduje się przy selektorze a, czyli dotyczy odnośników. Również rozmiar 14pt nie dotyczy odnośnika, tylko akapitu. Dla linku ustawiono font-size: 16pt. Typowy błąd polega tu na czytaniu deklaracji CSS od góry do dołu bez pilnowania, do którego selektora należą dane właściwości. Z mojego doświadczenia najlepiej zawsze patrzeć na blok między klamrami: selektor przed klamrą mówi, czego dotyczy reguła, a właściwości w środku mówią, co dokładnie zostanie zmienione.