KWALIFIKACJA INF3 - CZERWIEC 2018

PYTANIE NR 2.
Dołączenie zewnętrznego arkusza stylów do kodu HTML jest realizowane przy użyciu znacznika
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Zewnętrzny arkusz stylów CSS dołącza się w HTML przez element <link> (zwykle w sekcji <head>), wskazując plik w atrybucie href i relację rel="stylesheet". Element <style> służy do stylów osadzonych w dokumencie, a <meta> do metadanych.

Pełne wyjaśnienie:

Dołączenie zewnętrznego arkusza stylów (pliku CSS) do dokumentu HTML realizuje się przez element <link>. W praktyce umieszcza się go w sekcji <head>, aby przeglądarka mogła pobrać i zastosować style jeszcze przed renderowaniem treści.

Typowy zapis wygląda koncepcyjnie tak: <link rel="stylesheet" href="style.css"> — kluczowe jest to, że <link> służy do odwoływania się do zewnętrznych zasobów, w tym arkuszy CSS.

  • Odpowiedź "<css>" jest niepoprawna, ponieważ nie jest to standardowy element HTML służący do podpinania stylów.
  • Odpowiedź "<style>" dotyczy innego mechanizmu: umieszczania reguł CSS bezpośrednio w dokumencie (style wewnętrzne), a nie linkowania pliku zewnętrznego.
  • Odpowiedź "<meta>" służy do opisu metadanych (np. kodowania znaków, opisu strony, viewportu) i nie dołącza arkuszy stylów.

Wskazówka egzaminacyjna: jeśli w pytaniu pojawia się sformułowanie "zewnętrzny arkusz stylów" albo "plik CSS", szukaj elementu, który linkuje zasób, czyli <link>. Jeśli jest mowa o stylach "w kodzie HTML", często chodzi o <style>.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Zewnętrzny plik CSS dołącza się przez element <link> w sekcji <head>, np. z atrybutami rel i href. Dzięki temu style są ładowane jako osobny zasób, a HTML pozostaje czytelny.
Element <link> służy do odwołania do pliku znajdującego się poza dokumentem. Z kolei <style> zawiera reguły CSS wpisane bezpośrednio w HTML, więc nie wskazuje zewnętrznego pliku.
Atrybut rel opisuje relację linkowanego zasobu do dokumentu. Wartość stylesheet informuje przeglądarkę, że wskazany plik jest arkuszem stylów CSS i należy go zastosować do renderowania strony.
Najczęściej element <link> umieszcza się w sekcji <head>. To dobra praktyka, bo przeglądarka może pobrać style wcześniej i ograniczyć "przeskakiwanie" wyglądu podczas ładowania strony.
Tak, można dołączyć kilka arkuszy stylów przez wiele elementów <link>. Trzeba jednak pamiętać o kolejności: później dołączone style mogą nadpisywać wcześniejsze reguły (zależnie od specyficzności selektorów).
CSS zewnętrzny jest w osobnym pliku i jest dołączany przez <link>, co ułatwia ponowne użycie i cache. CSS wewnętrzny jest wpisany w <style> w HTML, co bywa wygodne w małych przykładach, ale utrudnia utrzymanie większych projektów.
Nie, <meta> nie służy do dołączania CSS. Ten element opisuje metadane dokumentu (np. kodowanie, viewport, opis). Do arkuszy stylów wykorzystuje się <link> lub style osadzone w <style>.
<style> nie "pobierze" pliku CSS z dysku/serwera, bo nie jest od tego. Żeby użyć <style>, musisz wkleić reguły CSS bezpośrednio w jego treść. Do wskazania pliku zewnętrznego potrzebujesz <link>.
W narzędziach deweloperskich otwórz zakładkę sieci (Network) i odśwież stronę. Powinieneś zobaczyć żądanie do pliku CSS wskazanego w <link>. Dodatkowo w panelu Elements/Inspector sprawdzisz, czy reguły stylów są stosowane.
Najczęściej to zła ścieżka w href, literówka w nazwie pliku, brak rel="stylesheet" albo umieszczenie linku w niewłaściwym miejscu. Warto też sprawdzić cache i czy serwer zwraca poprawny typ MIME dla pliku CSS.
info

Około 72% zdających odpowiada poprawnie na to pytanie. średnio łatwe

Eksperci podkreślają: "Zewnętrzny arkusz stylów CSS dołącza się w HTML przez element &lt;link&gt; (zwykle w sekcji &lt;head&gt;), wskazując plik w atrybucie href i relację rel="stylesheet"."

Źródła:

  • MDN Web Docs: "&lt;link&gt;: The External Resource Link element" (sekcja o stylach i rel="stylesheet"), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link - accessed 2026-02-27
  • MDN Web Docs: "&lt;style&gt;: The Style Information element" (opis zastosowania stylów osadzonych), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style - accessed 2026-02-27
  • WHATWG HTML Living Standard: "The link element" (definicja i przeznaczenie elementu link), https://html.spec.whatwg.org/multipage/semantics.html#the-link-element - accessed 2026-02-27

Materiały:

  • Dokumentacja MDN dotycząca elementu link i arkuszy stylów
  • Specyfikacja HTML (sekcja o elementach w head i linkowaniu zasobów)
  • Ćwiczenia praktyczne: tworzenie strony z osobnym plikiem CSS i testowanie kolejności ładowania

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego