Dokumentacja CSS z przykładami: Zewnętrzny CSS

Q: Co to jest zewnętrzny CSS?

Zewnętrzny CSS to arkusz stylów zapisany we własnym pliku .css i wczytywany przez w sekcji strony. Każda strona, która dołącza ten plik, dostaje te same style, a przeglądarka przechowuje plik w pamięci podręcznej między stronami.

Q: Jak podłączyć plik CSS do HTML?

Dodaj wewnątrz . href to ścieżka względna wobec pliku HTML, więc css/styles.css wskazuje folder css obok niego, a /styles.css zaczyna od katalogu głównego witryny.

Q: Dlaczego mój zewnętrzny CSS nie działa?

Najczęstsze przyczyny to zła ścieżka w href (sprawdź na karcie Network, czy nie ma błędu 404), brak rel="stylesheet", znaczniki wpisane w pliku .css albo późniejsza reguła, która nadpisuje twoją. Twarde odświeżenie wyklucza starą kopię z pamięci podręcznej.

Zewnętrzny i wewnętrzny CSS: link i style wyjaśnione

Zewnętrzny CSS znajduje się w pliku .css, który każda strona dołącza przez <link rel="stylesheet">; wewnętrzny CSS siedzi w elemencie <style> na jednej stronie. Poznaj oba sposoby, działanie ścieżek do plików i to, która reguła wygrywa, gdy się spotkają.

Na tej stronie są działające edytory: edytuj, uruchamiaj i od razu zobacz wynik.

Autor: Kevin Spektor, Współzałożyciel i CTO

Opublikowano Sep 24, 2026

Zewnętrzny CSS w jednej linii

Zewnętrzny CSS to osobny plik .css. Dołączasz go w <head> każdej strony, która go potrzebuje:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Sam plik zawiera zwykłe reguły CSS, bez żadnych znaczników HTML wokół nich:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

Podgląd poniżej nie ma drugiego pliku do wczytania, więc umieszcza ten sam CSS w elemencie <style>. To wewnętrzny CSS i renderuje się dokładnie tak, jak dołączony plik:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

Wewnętrzny CSS: element style

Wewnętrzny CSS (nazywany też osadzonym) to element <style> na stronie. Umieść go w <head>, żeby style były znane, zanim wyrenderuje się body. Dotyczy całej strony, a jego reguły używają selektorów, czego atrybuty style w linii nie potrafią.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

Najedź kursorem na tag: :hover działa tutaj, bo to prawdziwa reguła. Trzeci sposób, atrybut style, omawia strona o CSS w linii.

Wewnętrzny a zewnętrzny CSS

	Zewnętrzny (`<link>`)	Wewnętrzny (`<style>`)
Gdzie	Plik `.css`	Wewnątrz strony HTML
Zasięg	Każda strona, która go dołącza	Jedna strona
Pamięć podręczna	Pobierany raz, używany na wielu stronach	Wysyłany ponownie z każdą stroną
Zmiana wyglądu witryny	Edytujesz jeden plik	Edytujesz każdą stronę
Dodatkowe żądanie	Tak, jedno na plik	Nie
Dobry do	Prawdziwych stron internetowych	Dem, pojedynczych stron, e-maili HTML, kluczowego CSS

Specyficzność jest taka sama w obu przypadkach: reguła w elemencie <style> i ta sama reguła w dołączonym pliku ważą dokładnie tyle samo. Przy remisie wygrywa ta, która występuje później w dokumencie.

Kolejność: późniejszy arkusz stylów wygrywa

Arkusze stylów są odczytywane w kolejności dokumentu, zarówno <link>, jak i <style>. Z dwóch reguł o tej samej specyficzności wygrywa późniejsza. Dwa bloki <style> poniżej udają dołączony plik, po którym następuje nadpisanie na poziomie strony:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

Przycisk zachowuje padding i biały tekst z pierwszej reguły, a z drugiej bierze tylko tło. Dlatego własny arkusz stylów witryny umieszcza się po arkuszu frameworka: najpierw dołącz przez <link> bibliotekę, potem swój.

Ścieżki do plików w href

href w <link> to adres URL rozwiązywany względem położenia pliku HTML.

href	Wczytuje
`styles.css`	Plik w tym samym folderze co strona
`css/styles.css`	Folder `css` obok strony
`../styles.css`	Folder wyżej
`/styles.css`	Od katalogu głównego witryny
`https://example.com/a.css`	Pełny adres URL na innym serwerze

W witrynie, której strony leżą na różnych głębokościach, forma względna wobec katalogu głównego (/css/styles.css) sprawia, że jedna ścieżka działa na każdej stronie.

Arkusze stylów do druku i innych mediów

Atrybut media ogranicza arkusz stylów do pasujących warunków. Przyjmują go zarówno <link>, jak i <style>:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

Podgląd to ekran, więc baner jest widoczny. Na prawdziwej stronie baner znika z wydruku, a w DevTools zobaczysz to samo, emulując typ mediów print (panel Rendering).

Częste błędy

Zła ścieżka. Literówka w href niczego nie wczytuje, a strona renderuje się bez stylów. Otwórz DevTools, kartę Network, i poszukaj błędu 404 dla pliku .css.
Brak rel="stylesheet". Bez niego <link href="styles.css"> nie wczytuje arkusza stylów.
HTML w pliku .css. Plik .css zawiera tylko reguły. Znaczniki <style> w nim nie są poprawnym CSS i psują sąsiednią regułę.
Własny arkusz stylów przed arkuszem frameworka. Przy równej specyficzności wygrywa późniejszy plik, więc własny CSS dołączaj na końcu.
Widoczna stara wersja. Przeglądarki przechowują arkusze stylów w pamięci podręcznej. Wykonaj twarde odświeżenie albo dodaj wersję do adresu URL (styles.css?v=2), gdy wdrażasz zmianę.

Najczęściej zadawane pytania

Co to jest zewnętrzny CSS?

Zewnętrzny CSS to arkusz stylów zapisany we własnym pliku .css i wczytywany przez <link rel="stylesheet" href="styles.css"> w sekcji <head> strony. Każda strona, która dołącza ten plik, dostaje te same style, a przeglądarka przechowuje plik w pamięci podręcznej między stronami.

Co to jest wewnętrzny CSS?

Wewnętrzny CSS, nazywany też osadzonym, to CSS zapisany w elemencie <style> w samym dokumencie HTML, zwykle w <head>. Dotyczy tylko tej strony.

Jak podłączyć plik CSS do HTML?

Dodaj <link rel="stylesheet" href="styles.css"> wewnątrz <head>. href to ścieżka względna wobec pliku HTML, więc css/styles.css wskazuje folder css obok niego, a /styles.css zaczyna od katalogu głównego witryny.

Co jest lepsze, wewnętrzny czy zewnętrzny CSS?

Zewnętrzny CSS dla wszystkiego, co ma więcej niż jedną stronę: jeden plik do edycji, a przeglądarki pobierają go raz i używają ponownie. Wewnętrzny CSS pasuje do pojedynczej strony, dema albo małego bloku kluczowych stylów, które chcesz mieć w pierwszej odpowiedzi serwera.

Dlaczego mój zewnętrzny CSS nie działa?

Najczęstsze przyczyny to zła ścieżka w href (sprawdź na karcie Network, czy nie ma błędu 404), brak rel="stylesheet", znaczniki <style> wpisane w pliku .css albo późniejsza reguła, która nadpisuje twoją. Twarde odświeżenie wyklucza starą kopię z pamięci podręcznej.

Powiązane zagadnienia