KWALIFIKACJA INF3 - CZERWIEC 2020

PYTANIE NR 4.
Aby dołączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, należy użyć następującego fragmentu kodu HTML
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Aby dołączyć zewnętrzny plik CSS do dokumentu HTML, używa się elementu <link> z atrybutem rel="stylesheet" oraz href wskazującym nazwę/ścieżkę do pliku (np. styl.css). Pozostałe propozycje nie są poprawnym sposobem linkowania arkusza stylów.

Pełne wyjaśnienie:

Dołączenie kaskadowego arkusza stylów zapisanych w zewnętrznym pliku realizuje się w HTML poprzez element <link>. Jest to element przeznaczony do deklarowania powiązań dokumentu z zasobami zewnętrznymi (np. arkuszami stylów). Kluczowe są dwa atrybuty:

  • rel="stylesheet" – informuje przeglądarkę, że wskazany zasób jest arkuszem stylów.
  • href="styl.css" – podaje adres/ścieżkę do pliku CSS.

Atrybut type="text/css" bywa spotykany w starszych przykładach; obecnie często jest pomijany, ale jego obecność zwykle nie powoduje błędu interpretacji w praktyce egzaminacyjnej. Najważniejsze jest rozpoznanie właściwego elementu (<link>) i atrybutu rel.

Dlaczego pozostałe odpowiedzi są niepoprawne?

  • <div ...> służy do strukturyzowania treści w <body>, a nie do dołączania zasobów. Atrybuty typu "relation" nie są standardowym mechanizmem podpinania CSS.
  • <option ...> jest elementem formularza (listy rozwijanej) i nie służy do ładowania plików. Dodatkowo składnia "optionvalue" jest błędna.
  • <meta ...> opisuje metadane dokumentu (np. kodowanie znaków przez charset), ale nie wskazuje arkusza stylów w formie pliku CSS. Użycie charset z nazwą pliku nie ma sensu semantycznego.

Wskazówka egzaminacyjna: jeśli pytanie dotyczy zewnętrznego CSS, niemal zawsze poprawna odpowiedź będzie zawierała <link>, rel="stylesheet" oraz href ze ścieżką do pliku. Natomiast <style> dotyczy CSS osadzonego w dokumencie.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Zewnętrzny CSS podpina się elementem <link> w sekcji <head>, np.: <link rel="stylesheet" href="styl.css">. Atrybut rel określa typ powiązania (arkusz stylów), a href wskazuje plik.
Najczęściej umieszcza się go w <head>, aby style były znane przeglądarce przed renderowaniem treści. Technicznie przeglądarki mogą przetwarzać go też w innych miejscach, ale w praktyce i na egzaminie przyjmuje się <head> jako poprawną lokalizację.
Atrybut rel opisuje relację zasobu z dokumentem. Wartość stylesheet mówi wprost, że plik z href to arkusz stylów do zastosowania. Bez tej informacji przeglądarka nie musi traktować pliku jako CSS, co może skutkować brakiem stylów.
W nowoczesnym HTML atrybut type zwykle nie jest wymagany dla CSS, bo przeglądarki domyślnie rozpoznają arkusz stylów po rel="stylesheet". W zadaniach egzaminacyjnych możesz spotkać przykłady z type i nadal są one zazwyczaj akceptowalne jako poprawne.
<link> dołącza CSS z pliku zewnętrznego (np. styl.css), co ułatwia ponowne użycie na wielu podstronach. <style> zawiera CSS wpisany bezpośrednio w HTML. Plik zewnętrzny jest zwykle lepszy do większych projektów i utrzymania.
Sprawdź: ścieżkę w href (literówki, katalog), poprawność rel="stylesheet", czy plik CSS faktycznie istnieje na serwerze oraz błędy w konsoli przeglądarki (Network/Console). Częstym problemem jest też cache — warto wykonać twarde odświeżenie.
Nie jest to standardowy mechanizm. <meta> służy do metadanych (np. kodowanie przez charset, opis strony, viewport). Do linkowania arkusza CSS używa się <link rel="stylesheet" ...>. Próba użycia <meta> do podpinania CSS zwykle nie zadziała.
Zewnętrzny CSS jest lepszy, gdy chcesz spójnego wyglądu wielu podstron, łatwiejszego utrzymania i mniejszego bałaganu w HTML. Style inline (atrybut style) są przydatne wyjątkowo, np. dla pojedynczej, specyficznej reguły lub w prototypie, ale utrudniają późniejsze zarządzanie.
Dodajesz kilka elementów <link rel="stylesheet" ...> (z różnymi href), zwykle w <head>. Kolejność ma znaczenie: reguły wczytane później mogą nadpisywać wcześniejsze (o ile mają odpowiednią specyficzność). To ważne np. przy osobnym pliku z nadpisaniami.
Utrwal trzy sposoby CSS: zewnętrzny plik przez <link>, osadzony przez <style> oraz inline przez style. Przećwicz też lokalizację <head> i typowe błędy w href. W zadaniach testowych zwracaj uwagę na rel=stylesheet.
info

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

Specjaliści zwracają uwagę: "Aby dołączyć zewnętrzny plik CSS do dokumentu HTML, używa się elementu &lt;link&gt; z atrybutem rel=&quot;stylesheet&quot; oraz href wskazującym nazwę/ścieżkę do pliku (np. styl.css)."

Źródła:

  • MDN Web Docs: "&lt;link&gt;: The External Resource Link element" (opis rel=stylesheet i href), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link - accessed 2026-02-27
  • WHATWG HTML Living Standard: "The link element" (link types, stylesheet), https://html.spec.whatwg.org/multipage/semantics.html#the-link-element - accessed 2026-02-27
  • W3C: "HTML5 - A vocabulary and associated APIs for HTML and XHTML" (informacje o elemencie link i rel), https://www.w3.org/TR/html5/document-metadata.html#the-link-element - accessed 2026-02-27

Materiały:

  • Dokumentacja HTML/HTML Living Standard (sekcja o elemencie &lt;link&gt;)
  • Dokumentacja MDN Web Docs: &lt;link&gt; oraz rel=stylesheet
  • Materiały o podstawach HTML i CSS dla INF.3 (dołączanie arkuszy stylów)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego