<p style="color: red;">To jest przykładowy akapit.</p> W podanym kodzie HTML przedstawiony styl CSS jest stylem
<p style="color: red;">To jest przykładowy akapit.</p>W podanym kodzie HTML przedstawiony styl CSS jest stylem
A. nagłówkowym.
B. zewnętrznym.
C. lokalnym.
D. dynamicznym.
Pytanie z egzaminu CKE, styczeń 2019 (arkusz E.14-X-19.01).
W tym fragmencie CSS został wpisany bezpośrednio w znaczniku akapitu, w atrybucie style. Taki sposób zapisu nazywa się stylem lokalnym, czyli inaczej stylem inline. Deklaracja color: red; działa tylko na ten jeden konkretny element p, w którym została umieszczona. Przeglądarka odczytuje HTML, widzi atrybut style i stosuje podaną regułę CSS bez szukania jej w osobnym pliku ani w sekcji head dokumentu. W praktyce taki zapis bywa wygodny do szybkiego testu, np. gdy chcemy na chwilę sprawdzić kolor, margines albo obramowanie pojedynczego elementu. Moim zdaniem warto jednak pamiętać, że w większych projektach style lokalne są raczej mało wygodne, bo mieszają strukturę HTML z wyglądem strony. Dobre praktyki branżowe zwykle zalecają przenoszenie CSS do arkusza zewnętrznego, np. pliku style.css, żeby łatwiej utrzymać spójność wyglądu i nie powtarzać tych samych deklaracji w wielu miejscach. Mimo to odpowiedź lokalnym jest tutaj jednoznacznie poprawna, bo właściwość CSS znajduje się dokładnie przy elemencie HTML, którego dotyczy.
W podanym przykładzie najważniejsze jest miejsce zapisania deklaracji CSS. Reguła color: red; nie znajduje się w osobnym pliku, nie jest też umieszczona w wydzielonym bloku stylów w nagłówku dokumentu. Została wpisana bezpośrednio do atrybutu style konkretnego znacznika p, więc mamy do czynienia ze stylem lokalnym, nazywanym też inline. To rozróżnienie jest dość istotne, bo w CSS sposób podłączenia stylu wpływa na organizację projektu, czytelność kodu i późniejsze utrzymanie strony. Określenie nagłówkowy może kojarzyć się z kodem wpisanym w części head dokumentu HTML, zwykle w znaczniku style. Tam reguły CSS są zebrane w jednym miejscu i mogą obejmować wiele elementów, na przykład wszystkie akapity albo elementy o danej klasie. Tutaj tego nie ma, bo deklaracja siedzi wewnątrz pojedynczego znacznika. Styl zewnętrzny oznaczałby użycie osobnego pliku CSS podłączonego przez link, na przykład do globalnego formatowania całej witryny. To jest najczęściej lepsze rozwiązanie w realnych projektach, ale nie pasuje do widocznego kodu. Dynamiczny styl z kolei sugeruje zmianę wyglądu w trakcie działania strony, często przez JavaScript, zdarzenia użytkownika albo modyfikację DOM. Sam fakt, że kolor jest czerwony, nie oznacza jeszcze żadnej dynamiki. Typowy błąd polega na patrzeniu tylko na efekt wizualny, a nie na miejsce zapisania reguły. W CSS trzeba zwracać uwagę właśnie na kontekst: atrybut style przy elemencie to styl lokalny, blok style w dokumencie to styl wewnętrzny lub nagłówkowy, a plik .css to styl zewnętrzny.