Jak nazywa się metoda dołączania arkusza stylów do dokumentu HTML użyta w przedstawionym kodzie?
<head> <style> p { color: red; } </style> </head>
A. Styl alternatywny, zewnętrzny.
B. Styl wpisany, lokalny.
C. Styl wewnętrzny.
D. Styl zewnętrzny.
W pokazanym fragmencie użyto stylu wewnętrznego, bo reguły CSS są zapisane w dokumencie HTML wewnątrz sekcji head, pomiędzy znacznikami <style> i </style>. Selektor p { color: red; } oznacza, że wszystkie akapity p na tej stronie dostaną czerwony kolor tekstu. To nie jest osobny plik CSS i nie jest to też styl dopisany bezpośrednio do konkretnego elementu HTML. W praktyce styl wewnętrzny przydaje się przy małych stronach, szybkich testach, przykładach edukacyjnych albo gdy dana strona ma mieć kilka reguł specyficznych tylko dla siebie. Z mojego doświadczenia to jest wygodne na początku nauki, bo od razu widać związek między HTML i CSS. W większych projektach dobrą praktyką jest jednak zwykle przenoszenie CSS do zewnętrznego pliku, np. style.css, bo łatwiej utrzymać porządek, cache przeglądarki działa sensowniej i te same style można wykorzystać na wielu podstronach. Standardowo tag <style> umieszcza się właśnie w head, żeby przeglądarka znała wygląd strony przed renderowaniem treści.
W tym kodzie nie chodzi o styl lokalny wpisany bezpośrednio przy elemencie, mimo że CSS faktycznie znajduje się w tym samym pliku HTML. Styl lokalny, często nazywany też inline, wyglądałby raczej tak: <p style='color: red;'>Tekst</p>. Wtedy deklaracja CSS jest przypisana tylko do jednego konkretnego znacznika przez atrybut style. Tutaj natomiast reguła p { color: red; } znajduje się w osobnym bloku <style>, więc działa globalnie w obrębie tej strony na wszystkie elementy pasujące do selektora p. To ważna różnica, bo wpływa na zasięg stylu i późniejsze utrzymanie kodu. Nie jest to również styl zewnętrzny, ponieważ zewnętrzny arkusz CSS dołącza się przez znacznik link, najczęściej w postaci <link rel='stylesheet' href='style.css'>. Wtedy reguły są zapisane w oddzielnym pliku, a HTML tylko wskazuje jego lokalizację. Określenie styl alternatywny, zewnętrzny też nie pasuje do tego przykładu. Alternatywne arkusze mogą być podpinane przez rel='alternate stylesheet' i służą np. do wyboru innego motywu wyglądu, ale tu nie ma ani pliku zewnętrznego, ani mechanizmu wyboru alternatywnego stylu. Typowy błąd myślowy polega na tym, że uczący się patrzy tylko na fakt, że CSS jest w dokumencie HTML, i od razu myli styl wewnętrzny z wpisanym. Moim zdaniem najprostsza zasada jest taka: atrybut style w znaczniku to styl wpisany, blok <style> w head to styl wewnętrzny, a plik .css podłączony przez link to styl zewnętrzny.