Dokumentacja CSS z przykładami: Inline CSS

Q: Czym jest inline CSS?

Inline CSS to CSS zapisany w atrybucie style elementu, na przykład . Deklaracje działają tylko na ten jeden element, bez selektora.

Q: Jakie są 3 sposoby dodania CSS do HTML?

Inline, przez atrybut style na elemencie; wewnętrzny, przez element na stronie; oraz zewnętrzny, przez osobny plik .css podpięty w za pomocą . Dla całej witryny zwykle wybiera się pliki zewnętrzne.

Q: Czy inline CSS nadpisuje zewnętrzny CSS?

Tak, w większości przypadków. Deklaracja w atrybucie style pokonuje każdy selektor z arkusza stylów, bez względu na jego specyficzność. Arkusz stylów może wygrać tylko przez !important, a !important inline pokonuje także to.

Q: Czy można użyć hover w inline CSS?

Nie. Atrybut style przyjmuje tylko deklaracje, więc nie da się w nim zapisać pseudoklas takich jak :hover, pseudoelementów takich jak ::before ani reguł @media. Umieść je w elemencie albo w arkuszu stylów.

Inline CSS: atrybut style i 3 sposoby dodania CSS

Inline CSS umieszcza deklaracje bezpośrednio na elemencie za pomocą atrybutu style. Poznaj składnię, sytuacje, w których style inline są dobrym wyborem, powód, dla którego wygrywają z arkuszami stylów, i porównanie z wewnętrznym i zewnętrznym CSS.

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

Czym jest inline CSS

Inline CSS to CSS zapisany bezpośrednio na elemencie HTML za pomocą atrybutu style. Jego wartość to lista deklaracji, property: value;, które działają tylko na ten element.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

Nie ma selektora ani nawiasów klamrowych: celem jest element, na którym stoi atrybut. Deklaracje oddzielaj średnikami. Ostatni średnik jest opcjonalny, ale jego zachowanie sprawia, że dopisanie kolejnej deklaracji jest bezpieczne.

Składnia

<element style="property: value; property: value;">

Część	Przykład	Uwagi
Atrybut	`style="..."`	Atrybut globalny: dozwolony na każdym elemencie HTML
Deklaracja	`color: #2563eb;`	Taka sama składnia jak w regule arkusza stylów
Kilka deklaracji	`padding: 8px; border: 1px solid #e5e7eb;`	Oddzielone `;`
Cudzysłowy w środku	`style="font-family: 'Courier New', monospace;"`	W atrybucie w podwójnym cudzysłowie używaj pojedynczych

Wszystko, co nie jest deklaracją, jest niedozwolone. :hover, ::before, @media i selektory nie mają miejsca w atrybucie style.

3 sposoby dodania CSS do HTML

CSS trafia na stronę na trzy sposoby. Ta strona omawia pierwszy; zewnętrzny i wewnętrzny CSS mają własną stronę.

Sposób	Gdzie jest CSS	Zasięg	Typowe użycie
Inline	Atrybut `style` na jednym elemencie	Ten element	Jednorazowe wartości, wartości ustawiane przez JavaScript
Wewnętrzny	Element `<style>` na stronie	Ta strona	Jednostronicowe dema, szablony e-maili, krytyczny CSS
Zewnętrzny	Plik `.css` podpięty przez `<link>`	Każda strona, która go podpina	Stylizowanie całej witryny

Ten sam akapit ostylowany na wszystkie trzy sposoby (plik zewnętrzny pokazano jako komentarz, bo podgląd nie ma drugiego pliku do wczytania):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

Trzeci akapit zachowuje padding i zaokrąglenie z reguły .note i zastępuje tylko tło, bo styl inline ustawia wyłącznie tę jedną właściwość.

Dlaczego style inline wygrywają

Gdy reguła z arkusza stylów i styl inline ustawiają tę samą właściwość, wygrywa styl inline. Nie ma znaczenia, jak specyficzny jest selektor: nawet selektor ID przegrywa.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

Jedynym wyjątkiem jest !important. Deklaracja z arkusza stylów oznaczona !important pokonuje zwykłą deklarację inline, a !important inline pokonuje obie. Właśnie dlatego style inline utrudniają utrzymanie witryny: żeby zmienić je z arkusza stylów, potrzebujesz !important, co zaczyna eskalację. Strona o !important omawia pełną kolejność.

Kiedy inline CSS jest dobrym narzędziem

Style inline dobrze pasują, gdy wartość jest danymi, a nie projektem: zmienia się dla każdego elementu i zapisuje ją szablon albo JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

Wygląd (kolory, wysokość, zaokrąglenie) jest w arkuszu stylów. Inline jest tylko szerokość, która różni się dla każdego paska. JavaScript zapisuje ten sam atrybut przez element.style:

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

Po kliknięciu HTML akapitu zawiera style="color: rgb(245, 158, 11); font-weight: bold;". Nazwy właściwości z łącznikiem zamieniają się w JavaScripcie na camelCase (font-weight to fontWeight).

Zmienna CSS jest często najczystszym rozwiązaniem pośrednim: ustaw inline tylko zmienną, style="--progress: 35%", i pozwól arkuszowi stylów jej użyć. Zobacz zmienne CSS.

Gdzie inline CSS nie wystarcza

Brak stanów i pseudoelementów. W atrybucie style nie napiszesz :hover, :focus ani ::before.
Brak media queries. Szerokość inline nie zmieni się na telefonie.
Powtarzanie. Dziesięć przycisków z tym samym stylem inline to dziesięć miejsc do edycji.
Trudne nadpisywanie. Pokonuje go tylko !important w arkuszu stylów.
Content Security Policy. Restrykcyjna CSP bez 'unsafe-inline' w style-src blokuje atrybuty style zapisane w HTML.

Częste błędy

Pisanie selektora albo nawiasów klamrowych w style. style="p { color: red }" zostaje zignorowane. Trafiają tam tylko deklaracje.
Używanie = zamiast :. Pisze się color: red, a nie color=red.
Zagnieżdżanie podwójnych cudzysłowów. style="font-family: "Arial"" kończy atrybut za wcześnie. W środku używaj pojedynczych cudzysłowów.
Zapominanie o jednostkach. style="width: 200" zostaje zignorowane; napisz 200px. Tylko długość 0 może obyć się bez jednostki.
Stylizowanie całej witryny inline. Przenieś powtarzające się style do klasy w arkuszu stylów, a inline zostaw wartości zależne od elementu.

Najczęściej zadawane pytania

Czym jest inline CSS?

Inline CSS to CSS zapisany w atrybucie style elementu, na przykład <p style="color: red;">. Deklaracje działają tylko na ten jeden element, bez selektora.

Jakie są 3 sposoby dodania CSS do HTML?

Inline, przez atrybut style na elemencie; wewnętrzny, przez element <style> na stronie; oraz zewnętrzny, przez osobny plik .css podpięty w <head> za pomocą <link rel="stylesheet" href="styles.css">. Dla całej witryny zwykle wybiera się pliki zewnętrzne.

Czy inline CSS nadpisuje zewnętrzny CSS?

Tak, w większości przypadków. Deklaracja w atrybucie style pokonuje każdy selektor z arkusza stylów, bez względu na jego specyficzność. Arkusz stylów może wygrać tylko przez !important, a !important inline pokonuje także to.

Czy inline CSS to zła praktyka?

Przy stylizowaniu całej witryny tak: powtarza się, nie może używać :hover ani media queries i trudno go nadpisać. Sprawdza się przy jednorazowych wartościach ustawianych przez JavaScript albo szablon, takich jak szerokość paska postępu czy kolor wybrany przez użytkownika.

Czy można użyć hover w inline CSS?

Nie. Atrybut style przyjmuje tylko deklaracje, więc nie da się w nim zapisać pseudoklas takich jak :hover, pseudoelementów takich jak ::before ani reguł @media. Umieść je w elemencie <style> albo w arkuszu stylów.

Powiązane zagadnienia